html - 影响另一个元素范围之外的元素

Question

我正在寻找技术解释，而不是解决方案。例如，如果我有以下 HTML 结构:

<div class="container">
    <div class="box1">
        <div class="square"></div>
    </div>
    <div class="box2">
        <div class="circle"></div>
    </div>
</div>

为什么我不能创建一个 CSS 规则，如果我将鼠标悬停在 .square 上，更改 .circle 的背景颜色？换句话说，为什么我不能影响另一个元素范围之外的元素？

此外，我们可以做到这一点吗？是否有任何 future 计划允许这种行为？

Answer 1

正如您所指出的，目前无法在 CSS2/CSS3 规范中选择元素的父元素。

回答:

它只是不在规范中，即当前的性能考虑和特异性在 CSS 中的工作方式。

它不在当前的 CSS 选择器规范中:

• Selectors Level 3 Spec
• CSS 2 Selectors Spec

同时，如果您需要选择父元素，您将不得不求助于 JavaScript。

Selectors Level 4 Working Draft包含一个 :has() 伪类，其工作方式与 jQuery 实现相同。截至 2015 年，这在任何浏览器中都不可用。

例子有()

container:has(> a.active) { /* styles to apply to the container tag */ }