虎记:强大的nth-child(n)伪类选择器玩法

转载前端小哥:https://www.cnblogs.com/hu-w/p/5289668.html

写在前面的戏:

最近参加了度娘前端IFE的春季班,刷任务,百度真是有营销头脑,让咱们这帮未来的技术狂人为他到处打广告(我可不去哪),其中做的几个任务中有几个以前没有用到的东西,

也算是有些许收获(现在做了一半任务哦,萌萌哒),今天就来捋一捋css强大的nth-child(n)选择器功能(以庆祝博客粉丝突破YI员,访问量突破一百大关,可喜可贺,荣登博客名人指日可待!!)



(常规选择器的YY)

这里说的东西有些初级哦,自己捋一捋思路写的,不想看就跳过吧

选择器又称为“查户口”,想找到一个节点,或者是找到多个节点,就跟警察抓凶手是一样一样的,从多方面入手,最简入手,就是抓人的准则

number1.   class类(饭卡,能够证明是这个学校的,可以找出一批人)

number2.   id身份证(就是找你呐,大胸弟)

number3.  *[tittle=‘大光头‘]属性选择器(强哥吗?)

指向不到你哈,用关系找你

number1.  div span后代选择器 (盒子兄啊,看看span是不是你孙子儿子啥的,有事儿)

number2.  div>span子代选择器(好啊,盒子兄,就是你儿子span)

number3.  div+span邻居选择器(span是你邻居吧)

最意外的是没有father选择器

事件选择器(犯人已经抓住)

a:link     (抓住之前的生活,吃喝嫖赌是样样精通啊)

a:hover  (被盯上的生活,女票跟人跑了)

a:active  (被抓后的生活,吃牢饭)

a:visited  (释放后的生活,吃喝嫖赌是样样精通啊)

伪元素(选中之后,施加魔法,给他个私生子,my god!这不是港剧才有的剧情吗)

:after 后面

:before 前面

(可以优雅得消除浮动

可以添加小三角...如下)


1

2

3

4

5

6

7

8

9

10

.hidden:before {

  content‘‘;

  displayblock;

  border-left6px solid transparent;

  border-right6px solid transparent;

  border-bottom6px solid #999999;

  positionabsolute;

  top-7px;

  left50px;

}

有没有很赞(瞧这,又扯到小三角去了,灰色效果为展示使用,渐变后毫无p感)



除了以上的常规选择器之外,其他的生僻选择器就不写了,亮出主题(没事儿,列个表)

我是一个表 nth-child() 莫用
奇数偶数 :nth-child(2n) 偶数项选中
技术偶数 :nth-child(2n-1) 奇数项选中
区间 nth-child(n+4) 选中大于4的项
区间 nth-child(-n+4) 选中小于4的项
间隔区间 nth-child(3n+1) 隔二选一
间隔区间 nth-child(3n) 隔三选一
从后数数 nth-last-child() 倒着数哦

如果想选中表格中的元素,使用强大的nth-child()伪类选择器异常方便(更加让人着迷的是,括号中的函数表达式,可以有无限可能)

我想来【奇数】项变成color:red;中国红


1

table tr:nth-child(2n-1){colorred;}

(偶数自行把玩)



我想【前三项】变成(幸运黄)

得劲



兄弟【隔三选一】来个过过瘾font-size:25px;


1

table tr:nth-child(3n){font-size25px;}

come on man!!



序文:2016-03-18中午吃完饭

关于nth-child( 3n+1 )和nth-child(3n)的共同点和不同点(感谢向晴同学的指正,你是我第二个粉丝哦)

主角 相同点 不同点
nth-child(3n) 中间隔二选一  起点:从0开始
nth-child(3n+1)  中间隔二选一  起点:从一开始

赶紧再举个梨子(上图)


1

table tr:nth-child(3n+1){color:red;}  /*(3n+1),当n=0的时候,值为一 */

继续上代码


1

table tr:nth-child(3n){color:red;} /*当n=0的时候,值等于零*/

(序文结束,还要谢谢向晴同学的指正!!)



最后一个咱就不试了,咱不骗人,铁定能成。

像这种需要简单函数表达式的,最好玩了,或者还有其他的玩法,这些只是常用的几种选择方法而已

关键是周围“敌军还有三十秒到达战场...”哎呦,“全军出击”

你懂的,(我不玩游戏,只是想出去透透气儿,哈哈哒)



手里有很多的学习笔记没有整理,等有空之后,再一篇一篇整理上博客,也算是对自己一个交代了

原文地址:https://www.cnblogs.com/BluceLee/p/9050298.html

时间: 2024-10-01 00:03:25

虎记:强大的nth-child(n)伪类选择器玩法的相关文章

CSS3 nth 伪类选择器

考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</section> <ul> <li>item 1</li> <li> <ul> <li>sub item 1</li> <li>sub item 2</li> <li>sub item

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

【转】伪类选择器

原文地址:http://www.w3cplus.com/css3/pseudo-class-selector 前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中 的第三部分,也是最后一部分——伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是 常用到的伪类选择器,那么先和大家一起简单总结一下

CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式

转自爱设计 原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹.虽 然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一

CSS3:nth-child()伪类选择器

Table表格奇偶数行定义样式: CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹.虽 然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”. 语法: :nth-child(an+b) 为什么选择她,

CSS3伪类选择器详解

前面花了两节内容分别在<CSS3基本选择器>和<CSS3属性选择器详解>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分——伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择器的使用方法.

CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)

<CSS3基本选择器> 一.通配符选择器(*) *{ marigin: 0; padding: 0; } 二.元素选择器(E) li {background-color: grey;color: orange;} 三.类选择器(.className) 四.id选择器(#ID) #first {background: lime;color: #000;} #last {background: #000;color: lime;} 五.后代选择器(E F) .demo li {color: blu

CSS3学习手记(二) 伪类选择器

伪类选择器 动态伪类 UI元素状态伪类 CSS3结构类 否定选择器 伪元素 动态伪类 这些伪类并不存在于HTM中,只有当用户和网站交互的时候才能体现出来 锚点伪类 :link  :visited 用户行为伪类 :hover :active :focus(获取鼠标焦点) UI元素状态伪类(CSS3新增) 我们把:enabled,:disabled,:check伪类称为UI元素状态伪类 兼容IE9以上  check只兼容OPera <!DOCTYPE html> <html> <

:nth-child()伪类选择器

CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹.虽 然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”. 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的