如何用CSS选择类为.pre的非首个元素？尝试选择器无效

首先得说清楚你原来的代码为什么没生效——看你的HTML结构，每个.pre都被包裹在单独的.line元素里，它们根本不是同级的兄弟节点！你用的.pre ~ .pre是相邻兄弟选择器，只能匹配同一个父元素下、在目标元素之后的兄弟元素，而你的每个.pre都有自己的.line父容器，这个选择器自然找不到任何匹配项。

下面给你两个可行的解决方案：

方案一：基于.line的位置选择（兼容性最好） #

既然每个.pre对应一个.line，我们可以直接选中第2个及以后的.line里面的.pre，这样就能排除第一个.pre：

/* 所有.pre默认蓝色 */
.pre { 
  background: blue; 
}

/* 第2个及以后的.line下的.pre设为红色 */
.wrapper > .lines > .line:nth-child(n+2) > .pre { 
  background: red; 
}

这个方法几乎兼容所有浏览器（包括旧版IE9+），非常稳妥。

方案二：使用:has()伪类（灵活但需浏览器支持） #

如果你的场景不需要兼容旧浏览器，想要更直接的选择逻辑，可以用CSS的:has()伪类来判断当前.pre的前面是否存在其他.pre元素：

.pre { 
  background: blue; 
}

/* 所有前面有其他.pre的元素设为红色 */
.wrapper .pre:has(~ .pre) { 
  background: red; 
}

注意：:has()伪类需要Chrome 101+、Firefox 121+或Safari 15.4+的支持，如果你的项目需要兼容旧浏览器，优先选方案一。

验证示例 #

对应你的HTML结构：

<div class="wrapper">
  <span class="lines">
    <span class="line">
      <span class="pre"> Pretext 1 </span>
    </span>
    <span class="line">
      <span class="pre"> Pretext 2 </span>
    </span>
    <span class="line">
      <span class="pre"> Pretext 3 </span>
    </span>
  </span>
</div>

用方案一的代码后，第一个.pre会显示蓝色，后面的.pre都会变成红色，完全符合你的需求。

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