共计 1701 个字符，预计需要花费 5 分钟才能阅读完成。
欢送关注我的公众号：前端侦探
介绍一个对于 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 我的项目还是能够尝试一下的。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
欢送关注我的公众号：前端侦探
