CSS :has伪类的用法

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

:has() 伪类的规范制定得很早，但是一直没有得到支持，主要是由于浏览器厂商顾忌性能的影响，因为 DOM 的渲染是从上往下、从内往外的，而 :has() 伪类的特性就是子元素影响祖先元素，前面的兄弟元素影响后面的兄弟元素，若想要成功渲染，需要子元素或者后方元素加载完毕才可以，这必然会影响网页的渲染速度。

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

在 1998 年，制定 CSS2 规范的时候，出现了 a>b 这样的 CSS 选择器，可以匹配子元素，这是非常实用的功能，对此展开了很多有关什么时候可以出现匹配父元素的选择器的讨论，因为一旦这样的功能实现，许多原本需要 JavaScript 代码处理的交互都可以省略了。

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

为何突然支持了呢？这就不得不提一下名为 Igalia 的著名私人咨询公司，这家公司以对开放源代码和开放标准的贡献和承诺而闻名，例如 JavaScript 中的 generator、async/await、temporal，CSS 中的 grid 布局，甚至 Chrome 浏览器中的 MathML 都是这家公司在其他公司的赞助下努力实现的，而 :has() 伪类则是这家公司的又一力作，解决了浏览器几十年都无法解决的性能问题。

所以，迎接 :has() 伪类时代的到来吧！截止到目前，Safari15.4 以及 Chrome105 均已经完成对 :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;
}