: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设置为蓝色
}