如何使用兄弟选择器在到达特定元素时停止选择后续元素？

当然可以实现，核心是通过通用兄弟选择器结合**:not()伪类**精准控制选择范围，以下是具体方案：

场景示例结构 #

假设你的HTML结构如下，需要选中.start之后、.stop前后的目标div：

<div class="start">起始元素</div>
<div>需要选中的元素1</div>
<div>需要选中的元素2</div>
<div class="stop">停止元素</div>
<div>不需要选中的元素1</div>
<div>不需要选中的元素2</div>

具体实现方案 #

1. 选中.start之后到.stop之前的所有div（不包含.stop）
   用:not()排除.stop本身及其之后的所有div：

   .start ~ div:not(.stop, .stop ~ div) {
     background-color: lightblue;
     padding: 8px;
   }
   

2. 选中.start之后到.stop的所有div（包含.stop）
   仅排除.stop之后的div，保留.stop本身：

   .start ~ div:not(.stop ~ div) {
     border: 1px solid #ff4444;
     padding: 8px;
   }
   

3. 精准选中.stop的前一个div
   借助:has()伪类（现代浏览器均支持）定位紧邻停止元素的前一个目标：

   .start ~ div:has(+ .stop) {
     font-weight: bold;
     color: #880000;
   }
   

原理说明 #

• ~是通用兄弟选择器，用于选中目标元素之后的所有同级匹配元素；
• :not()用于排除指定选择器匹配的元素，通过两者组合，就能圈定出从起始元素到停止元素的精确范围。

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