语法：E:nth-child(n){}
说明：nth-child() 是CSS3的一个伪类选择器，匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
效果实例：
一、数字序号写法 E:nth-child(5){} //数值
1
2
3
4
5
6
7
8
9
E表示标签，div, li, span等，下同。
注意：数字的序号是从1开始的哦，不像很多编程语言中索引是0开始的，参数是必须大于0的整数。
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
二、关键字写法 E:nth-child(even){} //偶数
1
2
3
4
5
6
7
8
9 E:nth-child(odd){} //奇数
1
2
3
4
5
6
7
8
9
关键字写法中，只有 even 和 odd 两种，匹配序号为偶数与奇数的元素。
三、倍数写法： E:nth-child(2n){} //2倍
1
2
3
4
5
6
7
8
9 E:nth-child(3n){} //3倍
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
3n 4n 5n
n是固定要写的，n从0开始遍历，直到找到所有匹配元素，n前加数值，加2就是2倍，可以任意的，1n, 2n, 3n, 4n, 5n... 依次类推。一般用到的就2n、3n比较多，再大也没什么意义了。
四、倍数分组写法：
倍数可以视为一组，比如3n，可以理解为3个li为一组，然后相加相减都是在这一组里面筛选的，相加、相减的值都是正整数的。n和+号或n和-号是必须写的。 E:nth-child(2n+1){} //倍数分组+值
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
2n+1 2n+2 2n+3
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
3n+1 3n+2 3n+3
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
4n+1 4n+2 4n+3
这种写法简单理解就是“隔几取几”，比如 3n+1 表示“隔二取一”，其余类推。 E:nth-child(2n-1){} //倍数分组-值
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
2n-1 2n-2 3n-2
1
2
3
4
5
6
7
8
9
10
11
12 1
2
3
4
5
6
7
8
9
10
11
12 1
2
3
4
5
6
7
8
9
10
11
12
3n-1 4n-1 4n-2
五、反向倍数分组写法： E:nth-child(-n+2){} //倍数负值
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
-n+2 -n+3 -n+4
反向倍数是从最后一个开始往回算的。可以选取序号小于某个值的元素，比如 -n+2 可以选取前2个元素。
其他一些效果： E:nth-child(n+3){} //选取序号大于3的元素 也就是除前2个元素外的元素
1
2
3
4
5
6
7
8
9
能有这篇文章，是因为聪聪问了我个问题，li隔行怎么弄，想了半天才想到将li6个一组，每组里面再减去相应的，试了下还真的可以，效果如下： li:nth-child(6n-5),li:nth-child(6n-4),li:nth-child(6n-3){}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
通过上面的效果实例，可以发现不同写法出来的效果有些是一样的，比如：
E:nth-child(2n){}和E:nth-child(even){}一样，
E:nth-child(2n+1){}和E:nth-child(odd){}一样。
兼容方面，现代浏览器完全没问题，但IE浏览器仅支持IE9及以上哦，要想在低版本上使用，另外想办法吧，臣妾做不到呀o(>﹏
总结：nth-child选择的是子元素，如果只想选择同类的子元素，那应该使用nth-of-type选择器。nth-child 的同类选择器还有first-child、last-child、only-child、nth-last-child
本文地址：/it/CSS-selector-nth-child.html 文章若需转载，请附上原文链接，谢谢配合。^_^
