#书摘 #css #前端
《CSS 选择器世界》 姗姗来迟的关联伪类 :has()
:has() 伪类是一个功能非常强大的伪类，它可以实现类似父选择器和前面兄弟选择器的功能。

:has()伪类的语义非常明确，和渲染表现保持一致。举个简单的例子，下面的CSS代码表示如果 <a> 元素里面有 <img> 元素，则 <a> 元素就匹配：

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

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

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

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

https://memo.cosine.ren/m/398