伪造：has（）“父选择器”只使用CSS [英] Faking the :has() "parent selector" using only CSS

问题描述

很久以来被人们称为许多选择器问题的答案，甚至有人认为完全不必要，但选择器4级伪类 ：has（），更好地称为父选择器，是仅从第4级开始，将不会在CSS中实现， strong> W3规格 。原因是它的效率低，已经被JavaScript功能覆盖。

It's long been hailed as the answer to many selector problems, even disputed by some as entirely unnecessary, but the Selectors Level 4 pseudo-class :has(), better known as the parent selector, is the only one from Level 4 that will not be implemented in CSS, according to the latest revision of the W3 Spec. Reason being that it's inefficient and already covered by JavaScript functionality.

在这个问题上，我一直在想如何使用纯CSS来伪造这个效果。下面我提供了一个方法，Q& A样式，实现效果作为答案，但想知道其他更好的方法。

Mulling over this, I've been thinking of how to fake this effect using pure CSS. Below I've provided one method, Q&A style, for achieving the effect as an answer, but would like to know of other, better methods. Specifically, more efficient CSS implementations, or responsive CSS implementations.

推荐答案

在Gecko和WebKit中，某些选择器可以使用< label for> 以及位于任何位置的关联的< input> 元素。这工作不可靠，但仍然很有趣。 演示（如果使用Chrome，您可能需要点击一次）

In Gecko and WebKit, certain selectors can "jump" using <label for> and an associated <input> element positioned anywhere. This works unreliably, but is still kind of fun. Demo (you might have to click once if using Chrome)

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

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

#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;
}

这篇关于伪造：has（）“父选择器”只使用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！