CSS3选择器 :nth-child(n) 详解

CSS3 :nth-child(n):

http://demo.doyoe.com/css3/nth-child(n)/

浏览器参照基准：IE9, Firefox, Chrome, Safari, Opera

语法：

E:nth-child(n){ sRules } 【n如果是具体数字则从1开始，如果是抽象的代数式则n从0开始】

* 匹配父元素索引为n的子元素E

【补充：】#parent :nth-child(1) [注意中间有个空格]会匹配父元素#parent下的每一个第一个元素，如下橙色代码例子，#demo :nth-child(1)会匹配到的元素有：<h1>选取ul第一个子元素li</h1> 【section的第一个元素】，<li>如果我是红色，说明你的选择到了我，浏览器还颇为先进</li> 【ul 的第一个元素】，<input type='text' name='user' />【div的第一个元素】；在此基础上，#parent  E:nth-child(1)会匹配 #parent下的每个第一个元素 中是E的那个元素.

:nth-child(n) 让你匹配到父元素的任一子元素：

Figure 1: 常规用法  DEMO

<section id="demo">

　　<h1>选取ul第一个子元素li</h1>

　　<ul>

　　　　<li>如果我是红色，说明你的选择到了我，浏览器还颇为先进</li>

　　　　<li>落后的浏览器</li>

　　　　<li>落后的浏览器</li>

　　　　<li>落后的浏览器</li>

　　</ul>

　　<div>

　　　　<input type='text' name='user' />

　　</div>

#demo li:nth-child(1){ color:#f00; }

* 除lte IE8浏览器外，你都能看到第一个li被匹配到，且文本为红色；

重点：匹配到的是父元素的子元素：

Figure 2: 如果代码是这样的  DEMO

<section id="demo"> <h1>选取#demo第一个子元素p</h1> <p>如果你以为我会被选中变红，那你就猜错了</p> <p>落后的浏览器</p> <p>落后的浏览器</p> <p>落后的浏览器... #demo p:nth-child(1){ color:#f00; }

* 上诉代码是不是让你感觉第一p元素会被匹配到？如果你真这么想，那你就真的错了，这里没有任何一个元素会被匹配到；

Figure 3: CSS如果改成这样  DEMO

#demo p:nth-child(2){ color:#f00; }

* 将Figure ^#2中的CSS伪类 #demo p:nth-child(1) 改成 #demo p:nth-child(2) 你会发现第一个p才被选中变红，why? 不急，我们再往下看看；

Figure 4: 再改  DEMO

#demo :nth-child(2){ color:#f00; }

* 我们再将Figure ^#3中的CSS伪类 #demo p:nth-child(2) 改成 #demo :nth-child(2) ，把p tag从选择器中去除，你会发现第一个p同样被选中变红。貌似这个才是能符合我们正常思维的，因为第1个p是#demo的第二个子元素；也就是说在本 DEMO 中 #demo p:nth-child(2) 与 #demo :nth-child(2) 是等价的；

* 你觉得这难理解么？CSS选择器是从右到左查询的，我猜你已经知道了这个。E:nth-child(n) 表示的是匹配父元素第2个子元素，如果第2个子元素正好是E，则被匹配到；

* 相信现在 Figure ^#2 为什么没有任何元素被选中，你已经可以理解了。因为#demo的第一个子元素并不是p，而是一个h1，所以这个选择器是无效的；

* 而 Figure ^#3 选择器 #demo p:nth-child(2) 表示匹配 #demo 的第2个子元素p，此时 #demo 的第2个子元素正好是一个p，所以被匹配到；

* 相对于 Figure ^#2 和 Figure ^#3，本例中的 #demo :nth-child(2) 表示直接选择 #demo 第2个子元素，不论这个子元素是任何标签，都将被匹配到；

:nth-child(n) 可能会这样被使用：

Figure 5: 间隔背景色效果  DEMO

<section id="demo"> <h1>还记得这种间隔背景色的效果么？</h1> <ul> <li>CSS3伪类 :nth-child(n) 实现的奇偶间隔背景色效果</li> <li>CSS3伪类 :nth-child(n) 实现的奇偶间隔背景色效果</li> <li>CSS3伪类 :nth-child(n) 实现的奇偶间隔背景色效果</li> <li>CSS3伪类 :nth-child(n) 实现的奇偶间隔背景色效果</li> <li>CSS3伪类 :nth-child(n) 实现的奇偶间隔背景色效果... #demo li{ background-color:#ddd; } #demo li:nth-child(2n){ background-color:#bbb; }

* 确实，:nth-child(n), 这个 n 不仅可以试一个具体的数字索引，也可以作为一个乘法的因子，比如本例中的 2n 不论这个 n 是多少，始终代表是的一个偶数，所以实现奇偶间隔真是轻而易举；

Figure 6: n+1使用场景  DEMO

<section id="demo"> <h1>我想每个显示4个方块，并且每列的背景色都不相同？</h1> <ul> <li>1</li><li>2</li><li>3</li><li>4</li> <li>5</li><li>6</li><li>7</li><li>8</li> <li>9</li><li>10</li><li>11</li><li>12</li> <li>13</li><li>14</li><li>15</li><li>16... #demo li{ float:left; } #demo li:nth-child(4n+1){ clear:left; background-color:#999; } #demo li:nth-child(4n+2){ background-color:#aaa; } #demo li:nth-child(4n+3){ background-color:#ccc; } #demo li:nth-child(4n+4){ background-color:#eee; }

* 有 Figure ^#5 这样一个 DEMO，如果也可以 n+1 这样子，你是不是会更兴奋？本例你可以看到 n+1 的使用场景，看看 DEMO 吧。相信你能拓展更多的使用场景和好玩的实例，Good Luck!

© Copyright Doyoe.com