html – 使用CSS伪造:has()“父选择器”

前端之家收集整理的这篇文章主要介绍了html – 使用CSS伪造:has()“父选择器”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
长期以来人们一直被称为许多选择器问题的答案,甚至有些人认为完全没有必要,但Selectors Level 4伪类:has(),更好地称为父选择器,是唯一一个来自Level 4的选择器根据 W3 Spec的最新版本,可以在CSS中实现.原因是它效率低下且已经被JavaScript功能所覆盖.

考虑到这一点,我一直在考虑如何使用纯CSS伪造这种效果.下面我提供了一种方法,Q& A风格,以实现作为答案的效果,但想知道是否有其他方法.具体来说,更有效的CSS实现,或响应式CSS实现.

解决方法

在Gecko和WebKit中,某些选择器可以使用< label for>“跳转”.和相关的<输入>元素位于任何地方这种做法不可靠,但仍然很有趣.
#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,则可能需要点击一次.)

猜你在找的HTML相关文章