css3 nth-child选择器

2018-11-04 浏览:463
css3 nth-child选择器
评论:(0)复制地址

有哪些 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;}


评论:(0)复制地址
发布:苗景云 | 分类:IT技术&设计 | Tags:CSS nth-child

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。