:nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择:
:nth-child(length);/*参数是具体数字*/
:nth-child(n);/*参数是n,n从0开始计算*/
:nth-child(n*length)/*n的倍数选择,n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/
//上面length为整数
:nth-child()可以定义他的值(值可以是整数,也可以是表达式),如上面所示,用来选择特定的子元素,对于这个我们直接看实例,比我说的更好理解。
:nth-child(3),选择某元素下的第三个子元素,(这里的3可以是你自己需要的数字),比如说,我需要选择列表中的第三个li元素,那么我们可以直接这样使用:
.demo li:nth-child(3) {background: lime;}
效果如下所示:

这种不式不能引用负值,也就是说li:nth-child(-3)是不正确的使用方法。
:nth-child(n),其中n是一个简单的表达式,那么"n"取值是从“0”开始计算的,到什么时候结束我也不知道,如果你在实际应用中直接这样使用的话,将会选中所有子元素,比如说,在我们的demo中,你在li中使用":nth-child(n)",那么将选中所有的"li",如:
.demo li:nth-child(n) {background: lime;}
等于
.demo li {background: lime;}
他其实是这样计算的
n=0 --》 没有选择元素
n=1 --》 选择第一个li,
n=2 --》 选择第二个li,后在的依此类推,这样下来就选中了所有的li
请看效果:

请注意了,这里的“n”只能是"n",不能使用其他字母代替,不然会没有任何效果的。
:nth-child(2n),这中方式是前一种的变身,我们可以选择n的2倍数,当然其中“2”可以换成你自己需要的数字,如:
.demo li:nth-child(2n) {background: lime;}
等于
.demo li:nth-child(even) {background: lime;}
我们来看一下其计算的过程:
n=0 --》 2n=0 --》 没有选中任何元素,
n=1 --》 2n=2 --》 选择了第二个li
n=2 --》 2n=4 --》 选择了第四个li,后面的依此类推
如果是“2n”这样跟我们以使用"even"命名class定义样式,所起到的效果是一样的,如图所示:

“:nth-child(2n)”也等于":nth-child(even)"效果。
:nth-child(2n-1),这个选择器是在":nth-child(2n)"基础上演变过来的,上面说了人是选择偶数,那么我们在他的基础上减去“1”就变成奇数选择,如:










