nth-of-type失效：如何为第二个active类元素应用CSS样式

嘿，我来给你捋清楚问题出在哪——你踩了CSS伪类选择器的一个常见坑：nth-of-type()和last-of-type是按元素类型的位置来选，不是按类的计数来选的。

举个具体的例子，你的父容器.p里全是<div>元素，nth-of-type(2)只会选中父容器里的第二个<div>，不管它有没有.active类；你想用它选「第二个带.active类的元素」，这完全不是它的功能范畴，自然就没效果了。

给你两个可行的解决方案 #

方案1：用相邻兄弟选择器（适合active元素连续的情况） #

看你的代码结构，两个active元素是挨着的，那这个方法最省事：

.p .active + .active {
  background: red;
}

这个选择器的逻辑是：选中紧跟在另一个.active元素后面的.active元素，刚好就是你要的第二个（也是当前唯一的第二个）active元素，完美匹配你的需求。

方案2：JS辅助（适合active元素可能不连续的情况） #

如果以后你的active元素可能不是连续的，CSS原生就做不到按类计数选择了，这时候可以用JS给第二个active元素加个专属类：

const activeItems = document.querySelectorAll('.p .active');
if (activeItems.length >= 2) {
  activeItems[1].classList.add('second-active');
}

然后在CSS里针对这个专属类写样式：

.p .second-active {
  background: red;
}

再回头说说你之前的选择器问题 #

• .p .active:nth-of-type(2)：这个选择器找的是「父容器里第二个<div>，且它有.active类」。如果哪天第一个<div>也加上了.active，这个选择器还是只会选第二个<div>，而不是第二个带.active的元素，逻辑完全不对。
• .p .active:last-of-type：这个找的是「父容器里最后一个<div>，且它有.active类」。如果最后一个<div>没有.active，这个选择器就直接失效了，也没法保证是第二个active元素。

内容的提问来源于stack exchange，提问作者Sanjay Goswami