0


CSS选择器(nth-child)

:nth-child()这个选择符括号内可以写+/- an + b (a,b均为整数)或者关键字

因为工作中有遇到要隐藏列表第三个子元素之后的所有子元素,所以有用到这个选择器,记录一下

(1) nth-child(a)

当括号里只写一个数字,比如

.list li:nth-child(2)

,作用为选中父元素list的第二个子元素li标签,如果list的第二个子元素不是li标签,则选择符失效

.list li:nth-child(2) { color: #f00;
} 

(2) nth-child(2n) / nth-child(2n+1)

括号内写2n就是选中list父元素的所有偶数项子元素list2n+1就是选中所有奇数项子元素。

.list > li:nth-child(2n + 1){color: #f00;
} 

(3) nth-child(even) / nth-child(odd)

括号内也允许使用关键字:odd代表奇数,even代表偶数。

.list > li:nth-child(even){color: #0f0;
} 

(4) nth-child(+/-n+b)

n的作用是连续向后选中,b的作用是从第几个子元素开始。 以

.list li:nth-child(n+3)

为例,将会选中第三个元素及之后的所有子元素

.list > li:nth-child(n + 3){color: #E6CC7E;
} 

.list > li:nth-child(-n + 3){color: #E6CC7E;
} 

标签: css 前端 css3

本文转载自: https://blog.csdn.net/web22050702/article/details/126090027
版权归原作者 前端开发小司机 所有, 如有侵权,请联系我们删除。

“CSS选择器(nth-child)”的评论:

还没有评论