CSS -在2023年引用dom结构中完全不同的元素，而不是子元素或兄弟元素

Question

我知道CSS语言在过去10年里改变了一些https://www.w3schools.com/cssref/css_selectors.php，想知道现在2023，是否有可能在完全不同的位置改变属性，而不是在dom结构内的孩子或兄弟姐妹。

例子

<div id="a"></div>
<div>other stuff</div>
<div>
<some various nesting>
<div id="c"></div>
</some various nesting>
</div>

假设我需要用这种方式将#a从#c更改为

#c:hover #a {
background-color: #ccc;
}

这将不起作用，因为#a不在#c内部，有一种方法可以在纯css中做到这一点，而不必使用必要的jquery或纯js?我想使用一个选择器，如果它是#c:hover getElementById("a") {…}

I tried also:

#c:hover :root #a {
background-color: #ccc;
}

没有成功。

这将是非常有用的完成样式化的东西，通常依赖于javascript，但有很多时候，用户禁用javascript出于安全原因。

Answer 1

可以使用CSS伪类has()

#a:has(~ #c:hover)意味着:悬浮在#c上，#c紧随#a(不直接)

下面是一个演示:

#a:has(~ #c:hover) {
background: #ccc;
}

<div id="a">other stuff</div>
<p>
<div id="b">div in the middle</div>
<p>
<div id="c">various nesting</div>

支持的浏览器:https://caniuse.com/css-has