CSS :has()伪类她来了

更新日期: 2022-08-25阅读: 969标签: 伪类

一、故事的背景和概要

:has() 伪类是一个功能非常强大的伪类,因为它可以实现类似“父选择器”和“前面兄弟选择器”的功能,对css的开发会有颠覆性的影响。

:has() 伪类的规范制定得很早,但是却一直没有得到支持。

主要是浏览器厂商顾忌性能的影响,要知道,dom 的渲染是从上往下,从内往外的。

而 :has() 伪类的的特性就是子元素影响祖先元素,前面的兄弟元素影响后面的兄弟元素,若想要成功渲染,必然需要在子元素或者后方元素加载完毕才可以,这必然会影响网页的渲染速度。

因此以至于一开始 :has() 伪类的规范中明确此伪类不能在CSS样式中使用,只能在类似 document.querySelector() 这样的 DOM 方法中使用。

在1998年,CSS2 规范制定的时候,带来了 a>b 这样的 CSS 选择器,可以匹配子元素,非常实用的能力,当时就有很多讨论,什么时候可以出现匹配父元素的选择器,因为一旦这样的能力支持,许许多多原本需要 JS 代码处理的交互都可以省略了。

结果一等就是24年,也就是2022年,随着Safari浏览器开始对:has()伪类进行支持,CSS世界才拉开了可以实现类似父选择器功能的大幕。

为何突然就支持了呢?

那就不得不提一下名为Igalia的著名的私人咨询公司,这家公司以对开放源代码和开放标准的贡献和承诺而闻名。

比方说JavaScript中的generator,async/await,temporal,CSS中的grid布局,甚至Chrome浏览器中的MathML都是这家公司在其他公司的赞助下啃下来的。

而:has()伪类则是这家公司的又一力作,搞定了浏览器几十年都无法解决的性能问题。

所以,还能说什么,赞叹,然后欢呼吧,迎接 :has() 伪类时代的到来吧。

就在我写下这段内容的此刻,Safari 15.4以及Chrome 105均已经完成支持了 :has() 伪类。


以目前浏览器的版本更新速度,不出一年,:has()伪类就可以在实际项目中使用了,这是一个务必要学习的CSS伪类,可以在很多场合减少开发的成本。


二、:has()伪类的语法和作用

:has() 伪类的语法比较简单,学习上手也很容易,因为其语义非常明确,和渲染表现保持一致,意思是某某元素如果匹配某某选择器,就会匹配。

举个简单的例子,下面的 CSS 代码表示如果 <a> 元素里面有 <img> 元素,则这个 <a> 元素就会匹配。

a:has(img) { display: block; }

我们可以使用这个选择器轻松区分是文字链接还是图像链接,并设置不同的CSS样式。

:has() 伪类支持所有的CSS选择符,例如:

a:has(> img) { display: block; }

表示匹配子元素是 <img> 元素的 <a> 元素会被匹配,而关系更远的后代元素则不考虑。

注意上面代码中 :has 伪类的参数,选择符 > 直接写在了参数的最前面,而不是 a:has(a > img) 这样的写法。

你可以理解为 :has() 伪类的参数的最前面有一个看不见的 :scope 伪类,因此, a:has(a > img) 这样的写法是不合法的。

类似的,我们还可以使用+或者~这样的选择符,可以实现“前面兄弟选择器”的效果,即根据后面的兄弟元素选择前面的元素。例如:

h5:has(+ p) { font-size: 1rem; }

表示匹配后面跟随 <p> 元素的 <h5> 元素。

:has() 伪类还支持复杂选择器和选择器列表,例如:

article:has(h5, p) { background-color: #f0f3f9; }

表示,只需要 <article> 元素内有 <h5> 元素或者有 <p> 元素就会匹配,是或的关系,不是与。如果希望是与的关系,也就是同时有 <h5> 元素和 <p> 元素才匹配,则可以试试下面的写法:

article:has(h5):has(p) { background-color: #f0f3f9; }

:has() 伪类还可以和其他伪类混用,例如 :checked 、 :enabled 等,甚至还可以和其他逻辑伪类混用,例如:

section:not(:has(h5)) {
  border: skyblue solid;
}
section:has(:not(h5)) {
  color: deepskyblue;
}

注意,上面这两个选择器所表示的含义是不一样的。

前面的选择器表示没有包含 <h5> 元素的 <section> 元素有天蓝色边框,而后者表示包含不是 <h5> 元素的 <section> 元素颜色深天蓝色。

比方说现在有如下所示的 html 代码:

<section>
  <p>只有p元素</p>
</section>
<section>
  <h5>不仅有h5元素</h5>
  <p>还有p元素</p>
</section>

则此时只有上面的 <section> 元素会有边框,因为只有这个 <section> 元素没有包含 <h5> 元素,而颜色变化会同时发生在两个 <section> 元素,因为这两个 <section> 元素都存在不是 <h5> 的后代元素。

此时的渲染效果如下图所示。


至于 :has() 伪类可以实际应用的场景,那实在是太多了,交互匹配,边界场景判断等,因为Web开发中需要根据某些元素变化产生联动反应的例子太多了。

有了 :has() 伪类,理论上页面中任意DOM变化都可以被其他DOM元素感知到,例如:

body:has(.eleA-active) .eleB {
  background-color: var(--primary-color);
  color: #fff;
}

是不是立马就懂了?

本文地址: https://www.zhangxinxu.com/wordpress/?p=10505

链接: https://fly63.com/article/detial/12046

css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。这里讲总结关于css伪类和伪元素的相关使用

如何使用JS操纵伪元素

获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。 更换class来实现伪元素属性值的更改、使用CSSStyleSheet的insertRule来为伪元素修改样式、

css获取除第一个之外的子元素

有时候我们需要用CSS选择非第一个子元素,例如下面这样的HTML,希望让两个span之间间隔一定的距离,但又不希望简单的给每个span设置margin-right(会导致最后一个span也有margin-right,可能影响之后元素的排版)。

为什么是link-visited-hover-active

通常我们在设置链接的一些伪类(link,visited,hover,active)样式时,要让不同的状态显示正确的样式,我们需要按一定的顺序设置这些伪类的样式。这里我就按CSS2规范中推荐的顺序进行介绍,即 link-visited-hover-active

CSS3新增的伪类有哪些 与 居中div的多种方法

CSS3新增伪类有那些?p:first-of-type:选择属于其父元素的首个<p>元素,p:last-of-type:选择属于其父元素的最后<p>元素,p:only-of-type:属于父元素的特定类型的唯一子元素,p:only-child:属于父元素的唯一子元素的每个<p>元素;p:nth-child(2)

深入理解CSS伪类

伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识

css否定伪类:not(s)

:not(X)是CSS中的一个否定伪类(选择器),并且接受一个简单的选择器作为参数。本质上,可以使任一其他选择器(作为参数)。:not(选择器)匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器。

善用CSS伪类,不用JS也能做出选项卡功能

本篇文章的技术给予选项卡UI另一种开发的选择,Radio button的特性还有很多应用可以做(如Switcher),只要善用HTML表单元素与CSS的一些技巧,也能玩出很多有趣的功能,甚至替代JavaScript的部份工作.

html中a标签的4个伪类样式

在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve,之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时候却发现并不起作用了

中间文字,两边横线的css3伪类的使用

CSS伪类是用来添加一些选择器的特殊效果。使用了css3的伪类,即相当于是在一个div中写入文字,然后在它前后各加了一个div,然后进行位置及宽高的调节。代码中只写一个div,然后在css样式中,对该div设置flex布局

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!