深度了解CSS3中:nth-child选择器用法

2017年09月01日 16:18:22益点益滴5041

前端实际应用中更容易用到的CSS3选择器是:first-child和:last-child,它们的作用分别是选取第一个和最末一个子元素。而实际上它们还有一个功能上更强大的兄弟选择器,:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n可以是数字、关键词或公式。除了 IE8 及更早的版本,所有主流浏览器均支持 :nth-child() 选择器。

以下例出所有可能的选择形式样式代码来给大家讲解:nth-child的实际用途:

:nth-child(2)选取第几个标签,“2可以是你想要的数字”

.demo01 li:nth-child(2){background:#090}

:nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同

.demo01 li:nth-child(n+4){background:#090}

:nth-child(-n+4)选取小于等于4标签

.demo01 li:nth-child(-n+4){background:#090}

:nth-child(2n)选取偶数标签,2n也可以是even

.demo01 li:nth-child(2n){background:#090}

:nth-child(2n-1)选取奇数标签,2n-1可以是odd

.demo01 li:nth-child(2n-1){background:#090}

:nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一”

.demo01 li:nth-child(3n+1){background:#090}

:last-child选取最后一个标签

.demo01 li:last-child{background:#090}

:nth-last-child(3)选取倒数第几个标签,3表示选取第3个

.demo01 li:nth-last-child(3){background:#090}

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。

下面我们单独举例为奇数和偶数 p 元素指定两种不同的背景色:

p:nth-child(odd){background:#ff0000;}

p:nth-child(even){background:#0000ff;}

需要注意的是,:nth-child是针对所有同级的子元素,不管同级子元素是a还是p,都将同等按序计数,计数从1开始。

超赞,真给力!嗯,必须鼓励~

打赏1
账号:mxy310@163.com[复制]
账号:77940140[复制]