如何仅用CSS在存在.c时选择其父元素的前同级.a元素？

你写的选择器 .a:has(+ .b:has(.c)) 本身是正确的，没生效大概率是下面两个原因之一：

1. 浏览器不支持:has()选择器 #

:has()是CSS里较新的特性，目前支持情况如下：

• Chrome 105+、Edge 105+、Safari 15.4+ 原生支持
• Firefox 需要在 about:config 中手动开启 layout.css.has-selector.enabled 选项

如果你的浏览器版本低于上述要求，这个选择器肯定无法生效，建议升级浏览器或开启对应设置。

2. DOM结构不匹配选择器规则 #

你的选择器对DOM结构有明确要求：

• .a 和 .b 必须是直接相邻的兄弟元素（中间不能插入任何其他元素）
• .c 必须是 .b 的后代元素（嵌套层数不限，但必须在.b内部）

符合要求的DOM结构示例：

<div class="a">目标元素</div>
<div class="b">
  <div class="c">触发元素</div>
</div>

如果.a和.b之间有其他元素，或者.c不在.b内部，选择器就无法匹配到.a。

测试验证 #

你可以用下面的完整代码测试，在支持:has()的浏览器中，第一个.a会变成红色加粗：

<!DOCTYPE html>
<html>
<head>
  <style>
    .a:has(+ .b:has(.c)) {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="a">这个a会被选中（后面的b包含c）</div>
  <div class="b">
    <div class="c">我是c</div>
  </div>

  <div class="a">这个a不会被选中（后面的b没有c）</div>
  <div class="b">
    <div>无c的b</div>
  </div>
</body>
</html>

旧浏览器兼容方案 #

如果必须支持不兼容:has()的旧浏览器，纯CSS没有可行替代方案，只能用JavaScript实现：

// 遍历所有.c元素
document.querySelectorAll('.c').forEach(c => {
  // 找到.c的最近父级.b
  const b = c.closest('.b');
  if (b) {
    // 找到.b的前一个兄弟元素.a
    const a = b.previousElementSibling;
    if (a && a.classList.contains('a')) {
      // 给.a添加样式类
      a.classList.add('highlight-a');
    }
  }
});

之后在CSS中定义.highlight-a的样式即可。

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