2023年能否用纯CSS修改DOM中非子/兄弟的无关元素样式？

结论很直接：2023年纯CSS无法实现你要的效果。

为什么你的选择器无效？ #

你尝试的两个选择器逻辑都不符合CSS选择器的遍历规则：

1. #c:hover #a：这个选择器是要选中#c:hover内部的#a元素，但你的DOM里#a在#c的外部，完全不在同一个嵌套层级里，自然匹配不到。
2. #c:hover :root #a：:root是文档根元素（通常是<html>），这个选择器是找#c:hover下面的根元素里的#a，但#c本身就是:root的后代，所以这个选择器的层级关系完全颠倒，不可能生效。

CSS选择器的核心限制 #

CSS选择器是单向正向遍历的：只能从父元素指向子元素、从前面的元素指向后面的兄弟元素，没有任何语法支持反向选择（比如从后代选祖先、从后面的元素选前面的非兄弟元素）。

目前所有标准CSS选择器（包括2023年已支持的新特性）都只能处理以下几种关系：

• 后代元素（空格分隔）
• 直接子元素（>）
• 相邻兄弟元素（+）
• 通用兄弟元素（~）
• 各类属性、伪类、伪元素选择器

你要的「当#c hover时修改#c的非子、非兄弟的前置元素#a的样式」，完全超出了现有CSS选择器的能力范围。

可行的替代方案 #

如果必须用纯CSS实现类似效果，唯一的办法是调整DOM结构：

• 把#a和#c的共同父元素提前，让#a成为#c所在父容器的兄弟元素，然后用:has()选择器配合通用兄弟选择器实现，比如：

  <div id="a"></div>
  <div class="container">
      <some various nesting>
          <div id="c"></div>
      </some various nesting>
  </div>
  

  对应的CSS：

  .container:has(#c:hover) ~ #a {
      background-color: #ccc;
  }
  

  （:has()选择器在2023年已被主流浏览器支持，它允许基于后代元素的状态选择父元素）

但如果不能修改DOM结构，那只能依赖JavaScript来实现，纯CSS没有解决方案。

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