:has() 伪类详解

CSS 函数式伪类 :has() 是一个强大的选择器，它允许我们根据元素内部或周围的其他元素来选择特定元素。这个伪类通过将可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

:has() 伪类的工作原理是：当作为参数传递的任何相对选择器在锚定到该元素时，如果至少匹配一个元素，则该元素被选中。这为我们提供了前所未有的选择能力，让我们能够基于元素的内容或上下文来应用样式。

/* 选择后面紧跟段落的 h1 元素并应用样式 */
h1:has(+ p) {
  margin-bottom: 0;
}

/* 选择包含 img 子元素的 div */
div:has(img) {
  border: 1px solid #ccc;
}

/* 选择包含特定类的父元素 */
.item:has(.active) {
  font-weight: bold;
}

:has() 伪类的优先级计算方法与 :is() 和 :not() 相同：以其参数中具体的选择器进行计算。这意味着 :has() 的优先级取决于它内部的选择器，而不是伪类本身。

需要注意的是，:has() 是一个相对较新的 CSS 功能，截至 2023 年 12 月，它已在所有主流浏览器中得到支持。这使得开发者可以在现代 Web 项目中放心使用这一强大的选择器。

:has() 的出现大大扩展了 CSS 的选择能力，让我们能够编写更加语义化和高效的样式代码。通过它，我们可以减少对 JavaScript 的依赖，使样式表更加简洁和可维护。