CSS如何选中连续指定类的第1至第4个元素

针对你描述的场景——10个带.abc类的<li>，中间有4个连续的同时带.abc和.xyz类的元素，以下是分别选中这4个元素的CSS方案：

1. 选中连续组的第1个.abc.xyz元素 #

这个元素的核心特征是：它前面紧邻的兄弟元素只有.abc类（无.xyz），用相邻兄弟选择器+:not()伪类精准定位：

.abc:not(.xyz) + .abc.xyz {
  /* 你的样式 */
}

2. 选中连续组的第2个.abc.xyz元素 #

基于第一个元素的选择器，继续链式拼接相邻兄弟选择器：

.abc:not(.xyz) + .abc.xyz + .abc.xyz {
  /* 你的样式 */
}

3. 选中连续组的第3个.abc.xyz元素 #

同理，延伸链式选择器即可：

.abc:not(.xyz) + .abc.xyz + .abc.xyz + .abc.xyz {
  /* 你的样式 */
}

4. 选中连续组的第4个.abc.xyz元素 #

这个元素的特征是：它后面紧邻的兄弟元素只有.abc类（无.xyz），现代浏览器可以用:has()伪类定位：

.abc.xyz:has(+ .abc:not(.xyz)) {
  /* 你的样式 */
}

如果需要兼容不支持:has()的旧浏览器，同样用链式相邻选择器：

.abc:not(.xyz) + .abc.xyz + .abc.xyz + .abc.xyz + .abc.xyz {
  /* 你的样式 */
}

补充：基于父容器位置的备选方案 #

如果这10个<li>是父容器（比如<ul>）的唯一子元素，且你明确知道连续组在父容器中的具体位置（比如前面有3个仅.abc的元素），可以用:nth-child()直接定位：

/* 假设连续组从第4个li开始 */
ul li.abc.xyz:nth-child(4) { /* 第1个连续元素 */ }
ul li.abc.xyz:nth-child(5) { /* 第2个连续元素 */ }
ul li.abc.xyz:nth-child(6) { /* 第3个连续元素 */ }
ul li.abc.xyz:nth-child(7) { /* 第4个连续元素 */ }

这种方式依赖元素的固定位置，灵活性不如基于类名关系的选择器，但实现简单。

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