CSS伪类选择器nth-child()
日期：2013-12-14 浏览次数：21206 次
这是一个css选择器，一个真正的伪类选择器，它就是nth-child(),下面是使用它的范例。
ul li:nth-child(3n+3) {
color: #ccc;
}
上面的css是干什么用的，它就是在无序列表里面选择是3倍数的列。也就是第3个，第6个，第9个等等。但是它任务原理是怎样的那？如果遇到其它情况你又如何使用nth-child那？
总的来说nth-child()圆括号里面支持两个关键词：even与odd。他们应该很明显的，even选择偶数标签，如第2、第4、第6等等。odd选择奇数标签，如第1，第3，第5等等。
正如你在第一个例子里面看到的，nth-child()的圆括号里也支持方程式的，是最简单的方程式吗？仅仅是数字。如果你在圆括号里面输入一个数字，那它仅仅选择这个数目对应的那个标签。比如，如何仅仅选择第5个标签元素。
ul li:nth-child(5) {
color: #ccc;
}
让我们回到刚开始例子里面的“3n+3”上面吧，他的任务原理是怎样的？为什么他仅仅选择3倍数的标签元素？这里就要理解“n”与数学方程式的计算。
“n”则表示大于等于0的整数。由此可见 3n就是3 x n，这个方程式就可以解释为”(3xn)+3″,也就是n为0或大于0的整数。于是我们可以得到
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
等等
:nth-child(2n+1)又是怎样计算的那？
(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
等等
稍等！这跟“odd”是一样的！所以”1“就没有必要多次出现了。如今，再看我们原来的例子就感觉代码复杂了些。我们可以用“3n+0”甚至“3n”代替“3n+3”.
(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Element
(3 x 2) = 6 = 6th Element
(3 x 3) = 9 = 9th Element
等等
正如你所看到的，我们不用+3就可以做到同样的效果。我们也可以使用负数。在方程式里面使用减法，如4n-1；
(4 x 0) – 1 = -1 = no match
(4 x 1) – 1 = 3 = 3rd Element
(4 x 2) – 1 = 7 = 7th Element
等等
使用“-n”值看起来有点乖僻。如果方程式计算得到的值是负数，他就不指定任何元素标签。正如结果展现的那样，这是一个相当聪明的技术，你可以使用“-n+3”选择选择前几个元素标签。
-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match
等等。
www.sitepoint.com站点有很好的参数讲解与指点，包括一些手动列表。我直接发布到这里了！
| n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
|---|---|---|---|---|---|---|
| 0 | 1 | 1 | 4 | - | - | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 12 | 8 | 8 | 1 |
| 3 | 7 | 13 | 16 | 12 | 13 | - |
|
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
