CSS如何选中连续带有指定类名的元素中的第一个？

我有10个带有相同class（abc）的li元素，其中包含4个连续同时带有abc和xyz类的元素，请问如何使用CSS选中这组连续元素中的第一个？

原代码示例 #

HTML

<ul>
  <li class="abc">abc</li>
  <li class="abc">abc</li>
  <li class="abc">abc</li>
  <li class="abc xyz">abc xyz</li>
  <li class="abc xyz">abc xyz</li>
  <li class="abc xyz">abc xyz</li>
  <li class="abc xyz">abc xyz</li>
  <li class="abc">abc</li>
  <li class="abc">abc</li>
  <li class="abc">abc</li>
</ul>

原CSS（无法实现需求）

.abc {
  color: red;
}

.abc + .xyz:nth-of-type(1) {
  color: yellow !important;
}

问题分析 #

你原来的选择器不生效的核心原因：

• :nth-of-type()是基于元素在父容器中的原生位置匹配，不是按类分组的位置。这里第一个.abc.xyz是第4个li，nth-of-type(1)根本不会选中它。
• .abc + .xyz的写法不准确，目标元素同时拥有abc和xyz类，需要明确写出类的组合。

正确解决方案 #

利用相邻兄弟选择器和:not()伪类，精准匹配连续.abc.xyz组的第一个元素：

.abc {
  color: red;
}

/* 选中连续.abc.xyz组的第一个元素 */
.abc:not(.xyz) + .abc.xyz {
  color: yellow;
}

这个选择器的逻辑：

1. .abc:not(.xyz)：定位所有只带abc、不带xyz的li元素
2. + .abc.xyz：匹配紧跟在上述元素之后的、同时拥有abc和xyz的元素——也就是连续.abc.xyz组的第一个元素

效果验证 #

应用后，第4个li（第一个.abc.xyz）会变为黄色，其他.abc元素保持红色，完全符合需求。

内容的提问来源于stack exchange，提问作者Muhammad Junaid