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

发布时间：2020-12-14 18:53:04 所属栏目：资源来源：网络整理

导读：长期以来人们一直被称为许多选择器问题的答案,甚至有些人认为完全没有必要,但Selectors Level 4伪类：has(),更好地称为父选择器,是唯一一个来自Level 4的选择器根据 W3 Spec的最新版本,可以在CSS中实现.原因是它效率低下且已经被JavaScript功能所覆盖. 考虑

长期以来人们一直被称为许多选择器问题的答案,甚至有些人认为完全没有必要,但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,则可能需要点击一次.)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!