如何通过CSS根据首个前置的A/B类元素选择目标元素？

可以实现，核心思路是利用**相邻兄弟选择器（+）和通用兄弟选择器（~）**的组合，通过排除规则精准定位目标元素。

实现方案 #

针对你的HTML结构，可通过以下选择器实现需求：

1. 为最近前置元素是class A的div（div 2、div 5）设置样式 #

/* 选中.A后紧邻的第一个div，以及.A后、下一个.B之前的所有div */
.A + div,
.A ~ div:not(.B ~ div) {
  color: red;
  font-weight: bold;
}

2. 为最近前置元素是class B的div（div 3、div 4）设置样式 #

/* 选中.B后紧邻的第一个div，以及.B后、下一个.A之前的所有div */
.B + div,
.B ~ div:not(.A ~ div) {
  color: blue;
  font-style: italic;
}

原理说明 #

• .A + div 精准匹配A类元素后紧跟的第一个div，直接命中div 2和div 5；
• .A ~ div:not(.B ~ div) 表示选中A类元素之后的所有div，但排除掉B类元素之后的div——也就是说，一旦出现B类元素，后续的div就不再受A类规则影响；
• 同理，.B ~ div:not(.A ~ div) 会选中B类元素之后的div，直到下一个A类元素出现为止，刚好覆盖div 3和div 4。

完整示例代码 #

<parent>
  <div> 1 </div>
  <div class='A'></div>
  <div> 2 </div>
  <div class='B'></div>
  <div> 3 </div>
  <div> 4 </div>
  <div class='A'></div>
  <div> 5 </div>
</parent>

<style>
.A + div,
.A ~ div:not(.B ~ div) {
  color: red;
  font-weight: bold;
}

.B + div,
.B ~ div:not(.A ~ div) {
  color: blue;
  font-style: italic;
}
</style>

内容的提问来源于stack exchange，提问作者Elliot Lee