css3 nth-child选择器

css3 nth-child选择器

css3的nth-child选择器，乍看起来很简单，其实不是那么容易。

简单用法

p:nth-child(n) // 选择属于其父元素的第n个子元素的每个 <p> 元素
p:nth-child(2n) // 选择属于其父元素的子元素的每个偶数<p> 元素
p:nth-child(2n + 1) // 选择属于其父元素的子元素的每个奇数<p> 元素

注意事项

大概大家都知道上面的使用方法，但是有一点搞不清楚的话，使用起来就会很困惑。那就是n是什么？

n是从0开始的正整数，它代表着一个序列，0， 1， 2......这样的。

但是:nth-child(n+m)中的n+m是从1开始计算的,也就是说子元素的起始计算序号是1，不存在0这样子的元素。第一个元素就是1，不是0。这和程序里面的数组起始序号还有jQuery的选择器都是不一样的。

这样子就很好理解了。当我们要选择哪些元素的时候，只要把参数根据n的递增算出来的值对应到子元素在父元素里面的位置序列就好了

比如查找第一个元素

:nth-child(1)

查找序列大于等于10的元素

:nth-child(n+10)

就这样子的

css3中还有一些其他的子元素选择器

比如

:first-child // 第一个元素
:last-child    // 最后一个元素
:nth-last-child // 从最后一个子元素开始计数，n还是0开始，但是子元素的最后一个是1，倒过来了

互相辅助，还是很好用的

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=h1kb0hai21j