欢送关注我的公众号:前端侦探
介绍一个对于CSS :nth-child
选择器的新个性。
不晓得大家有没有碰到过这样的问题或者需要,从一个非凡的、不可更改的HTML
构造中抉择出你想要的元素,比方
<h1 class="h1">题目1</h1><h1 class="h2">题目2</h1><p class="p1">段落1</p><p class="p1">段落1</p><p class="p2">段落2</p><p class="p2">段落2</p><!--想选中这个--><p class="p2">段落2</p><p class="p3">段落3</p>
请问,如何抉择第2个.p2
标签,如下
如果不借助 JS,如同并不是很容易?明天一起来探讨这样一个问题
一、nth-child 和 nth-of-type
抉择第几个元素能够想到nth-child
和nth-of-type
。
这两个的区别是,nth-child
代表的是第几个子元素,而nth-of-type
代表的是该标签类型的第几个元素。
间接看例子吧
:nth-child(2){ color: red}
选中第2个元素
而后是nth-of-type
:nth-of-type(2){ color: red}
抉择每种元素(h1元素
和p元素
)的第2个
如果限度一下类名,是不是如同能够实现咱们想要的成果?
.p2:nth-of-type(2){ color: red}
后果...什么都没选中
为什么会这样呢?其实.p2:nth-of-type(2)
能够拆分为:nth-of-type(2)
和.p2
。
:nth-of-type(2)
能够选中每种元素的第2个,也就是.h2
和.p1
,再联合.p2
选择器,留神,这里是“且”的关系,因为两者没有同时满足的,所以什么都没选中,示意如下
如同并不是咱们设想的那样?那有没有方法在所有的.p
中再抉择第2个呢?
二、nth-child 中的 of 关键词
没错,of
关键词就是为了实现这样的性能而产生的,或者说是补救了nth-child
和nth-of-type
的有余。
:nth-child()
takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based.
艰深意思就是先通过 of
前面的选择器筛选元素,而后再匹配第几个
:nth-child(<nth> [of <complex-selector-list>]?) { /* ... */}
比方要实现抉择第2个.p2
,能够间接这样实现
:nth-child(2 of .p2){ color: red}
成果如下,刚好是第2个.p2
原理是这样的
是不是非常容易?
三、还能够更灵便
当初在原先的 dom 中插入其余烦扰元素,比方这样的
<h1 class="h1">题目1</h1><p class="p1">段落1</p><p class="p1">段落1</p><p class="p2">段落2</p><p class="p3">段落3</p><h2 class="p2">题目段落2</h2><p class="p2">段落2</p><!--想选中这个--><p class="p3">段落3</p>
那么,当初如何抉择第2个.p2
并且标签为p
的元素呢?
如果用of
关键词,能够很轻松的实现,只不过须要留神筛选条件p.p2
:nth-child(2 of p.p2){ color: red}
这样就会跳过h2.p2
元素,如下
前面只有是非法的选择器即可!
四、兼容性和总结
其实这个关键词早在 2015 年就曾经在Safari
上反对了(Safari终于雄起了一回),但直到最近才在Chrome 111
上正式反对,足足落后了 8 年啊,如下
其实没什么好总结的,只须要记住一点,通过of
能够提前筛选元素,而后在匹配第 N 个元素,补救了nth-child
和nth-of-type
的有余。尽管目前还不能大规模应用,然而一些试验我的项目或者Electron
我的项目还是能够尝试一下的。最初,如果感觉还不错,对你有帮忙的话,欢送点赞、珍藏、转发❤❤❤
欢送关注我的公众号:前端侦探