请选择 进入手机版 | 继续访问电脑版
查看: 1502|回复: 0

一个功能非常强大的伪类,CSS :has() 伪类终于来了

[复制链接]
发表于 2022-8-25 18:32:03 | 显示全部楼层 |阅读模式
:has() 伪类的规范制定得很早,但是却一直没有得到支持。主要是浏览器厂商顾忌性能的影响,要知道,DOM 的渲染是从上往下,从内往外的。

好在性能问题得以解决,才使得 CSS 世界拉开了可以实现类似父选择器功能的大幕。

截止撰文时间,Safari 15.4 以及 Chrome 105 均已经完成支持了 :has() 伪类。

:has() 伪类的语义非常明确,和渲染表现保持一致,意思是某某元素如果匹配某某选择器,就会匹配。

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

  1. a:has(img) { display: block; }
复制代码

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

AI 玩家社区联系我们免责声明川公网安备 51019002003893号 蜀ICP备2021001153号-4网信办违法和不良信息举报中心

GMT+8, 2024-12-12 19:24

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表