CSS选择器之nth-child详解

语法：E:nth-child(n){}

说明：nth-child() 是 CSS3 的一个伪类选择器，匹配父元素的第 n 个子元素 E，假设该子元素不是 E，则选择符无效。

效果实例：

一、数字序号写法

E:nth-child(5) {}   //数值

E 表示标签，div, li, span 等，下同。

注意：数字的序号是从 1 开始的哦，不像很多编程语言中索引是 0 开始的，参数是必须大于 0 的整数。

二、关键字写法

E:nth-child(even) {}  //偶数

E:nth-child(odd) {}  //奇数

关键字写法中，只有 even 和 odd 两种，匹配序号为偶数与奇数的元素。

三、倍数写法：

E:nth-child(2n) {}   //2倍

E:nth-child(3n) {}   //3倍

n 是固定要写的，n 从 0 开始遍历，直到找到所有匹配元素，n 前加数值，加 2 就是 2 倍，可以任意的，1n, 2n, 3n, 4n, 5n... 依次类推。一般用到的就 2n、3n 比较多，再大也没什么意义了。

四、倍数分组写法：

倍数可以视为一组，比如 3n，可以理解为 3 个 li 为一组，然后相加相减都是在这一组里面筛选的，相加、相减的值都是正整数的。n 和 + 号 或 n 和 - 号是必须写的。

E:nth-child(2n+1) {}   //倍数分组+值

这种写法简单理解就是“隔几取几”，比如 3n+1 表示“隔二取一”，其余类推。

E:nth-child(2n-1) {}   //倍数分组-值

五、反向倍数分组写法：

E:nth-child(-n+2) {}   //倍数负值

反向倍数是从最后一个开始往回算的。可以选取序号小于某个值的元素，比如 -n+2 可以选取前 2 个元素。

其他一些效果：

E:nth-child(n+3) {}   //选取序号大于3的元素 也就是除前2个元素外的元素

能有这篇文章，是因为聪聪问了我个问题，li 隔行怎么弄，想了半天才想到将 li 6个一组，每组里面再减去相应的，试了下还真的可以，效果如下：

li:nth-child(6n-5),li:nth-child(6n-4),li:nth-child(6n-3) {}

兼容方面，现代浏览器完全没问题，但IE浏览器仅支持 IE9 及以上哦，要想在低版本上使用，另外想办法吧，臣妾做不到呀o(>﹏<)o！

总结：nth-child 选择的是子元素，如果只想选择同类的子元素，那应该使用 nth-of-type 选择器。nth-child 的同类选择器还有 first-child、last-child、only-child、nth-last-child。