苗景云的博客

有哪些 nth-child ?

:first-child

:first-of-type

:last-of-type

:only-of-type

:only-child 

:nth-child(n)   

:nth-last-child(n)

:nth-of-type(n)

:nth-last-of-type(n)

:last-child

选择第N个LI

ul.list li:nth-child(3){background: #000;}

选择前三个

ul.list li:nth-child(-n+3){background: #000;}

选择第四个到第八个

ul.list li:nth-child(n+4):nth-child(-n+8){background: #000;}

选择奇数行

ul.list li:nth-child(2n+1){background: #000;}

这里,nth-child提供了一种简写的方法

ul.list li:nth-child(odd){background: #000;}

选择偶数行

ul.list li:nth-child(2n){background: #000;}

这里,nth-child也提供了一种简写的方法

ul.list li:nth-child(even){background: #000;}

选择2\5\8等三倍数行

ul.list li:nth-child(3n+2){background: #000;}

选择1\4\7\10等三倍数行

ul.list li:nth-child(3n+1){background: #000;}

选择 5\10 等五倍数行

ul.list li:nth-child(5n){background: #000;}

选择第三个到第九个之间的奇数行(不包括3\9)

ul.list li:nth-child(2n+1):nth-child(n+4):nth-child(-n+8){background: #000;}

选择第三个到第九个之间的奇数行(包括3\9)

ul.list li:nth-child(2n+1):nth-child(n+3):nth-child(-n+9){background: #000;}

选择3位倍数+1的(1/4/7/10),其中的偶数

ul.list li:nth-child(3n+1):nth-child(2n){background: #000;}

如何选择最后两个

nth-last-child选择器的用法,和 nth-child 选择器的用法是完全一致的,只有一个不同,那就是 nth-child 是从第一个开始计数的,而nth-last-child是从倒数第一个开始计数的

ul.list li:nth-last-child(-n+2){background: #000;}

如何实现反选?

什么是反选,举例,我要选择除了1\4\7\10等三为倍数的数字之外的其他选项,如下表所示:

ul.list li:not(:nth-child(3n+1)){background: #000;}