:nth-child(n) 选择器的坑

作者:陆金龙    发表时间:2022-01-21 02:11   

关键词::nth-child(n)  

css匹配选择第n个子元素可以使用:nth-child(n) 选择器。

其匹配属于其父元素的第N个子元素,不论元素的类型。

其逻辑是先找到:nth-child(n)前元素的父元素,再找父元素的第n个子元素。

举例:

页面有以下html标签:

<div class="parent">
    <div class="other">other1</div>
    <div class="other">other2</div>
    <div class="one-third">one-third1</div>
    <div class="one-third">one-third2</div>
    <div class="one-third">one-third3</div>
</div>

要为类样式.one-third的第2个元素(one-third2)设置红色,则使用.one-third:nth-child(4), 而不是.one-third:nth-child(2)

.one-third:nth-child(4) {

    color:red;// 将one-third2设置为红色

}

 

.one-third:nth-child(2) {

   color:blue;// 将other2设置为蓝色

}