html - 伪造 :has() "parent selector" using only CSS

Question

长期以来，它一直被誉为许多选择器问题的答案，甚至有些人认为它完全没有必要，但 Selectors Level 4 伪类 :has()，根据 W3 Spec 的最新修订版，parent 选择器 更为人所知，它是 Level 4 中唯一不会在 CSS 中实现的选择器。 。原因是它效率低下并且已经被 JavaScript 功能覆盖。

考虑到这一点，我一直在考虑如何使用纯 CSS 伪造这种效果。下面我提供了一种实现效果的方法，Q&A style作为答案，但想知道是否还有其他方法。具体而言，更高效的 CSS 实现或响应式 CSS 实现。

Answer 1

在 Gecko 和 WebKit 中，某些选择器可以使用 <label for> “跳跃”和相关的 <input>元素定位在任何地方。这工作不可靠，但仍然很有趣。

#before {
    left: -9999px;
    position: absolute;
}
#parent {
    padding: 0.5em;
}
#before:hover + #parent {
    background-color: #123;
    color: white;
}
#label {
    border: 0.1em solid #678;
    border-radius: 0.2em;
    display: inline-block;
    padding: 0.5em;
}

<input type="checkbox" id="before">

<div id="parent">
    <label for="before" id="label">Hover over me!</label>
</div>

(如果使用 Chrome，您可能需要点击一次。)