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

概述长期以来人们一直被称为许多选择器问题的答案,甚至有些人认为完全没有必要,但Selectors Level 4伪类：has(),更好地称为父选择器,是唯一一个来自Level 4的选择器根据 W3 Spec的最新版本,可以在CSS中实现.原因是它效率低下且已经被JavaScript功能所覆盖. 考虑到这一点,我一直在考虑如何使用纯CSS伪造这种效果.下面我提供了一种方法,Q& A风格,以实现作为答案的 长期以来人们一直被称为许多选择器问题的答案,甚至有些人认为完全没有必要,但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 – 使用CSS伪造：has()“父选择器”全部内容，希望文章能够帮你解决html – 使用CSS伪造：has()“父选择器”所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。