伪造:has()"父选择器"仅使用CSS

Question

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

考虑到这一点,我一直在考虑如何使用纯CSS伪造这种效果.下面我提供了一种方法,Q&A风格,以实现作为答案的效果,但想知道是否有其他方法.具体来说,更有效的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,则可能需要点击一次.)