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

Modrić

:has() 伪类的规范制定得很早，但是却一直没有得到支持。主要是浏览器厂商顾忌性能的影响，要知道，DOM 的渲染是从上往下，从内往外的。

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

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

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

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

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

复制代码