新的伪类选择器 :has() 已经可用了

2022 年 3 月 14 日，随着 Safari 15.4 开始支持 :has() 伪类，CSS 终于实现了父选择器。

可以说，:has 选择器是迄今为止最强大的选择器，毫无例外。

以前难以实现的效果，现在可以纯粹依靠 CSS 实现。

之所以被认为是最强大的选择器，是因为它可以根据后续或包含的元素来决定前置或外层元素的 CSS 样式。

在此前的 CSS 选择器中，几乎所有选择器都被刻意设计成只能让前面的元素决定并作用于后续的元素。

例如，选择器 div p 表示如果 p 在 div 内部，则对 p 进行样式处理，而 div + p 表示如果一个 div 紧挨着在 p 前面，则对 p 进行样式处理。几乎没有选择器可以表达“如果 div 在 p 后面，则对 p 进行样式处理”的语义。这意味着需要依赖后续元素去改变前置元素样式的效果，都必须依赖 JavaScript。但现在有了 :has 选择器，这类效果大多仅用 CSS 就能实现。

# Syntax and function

:has(relative-selector-list) {
  /* ... */
}

:has(relative-selector-list) {
  /* ... */
}

• div:has(p) 表示当 div 中存在 p 时，将选择该 div
• div:has(>p) 表示当 div 具有直接子元素 p 时，将选择该 div
• div:has(+p) 表示当 div 后面紧跟着 p 时，将选择该 div
• div:has(~p) 表示当 div 具有类型为 p 的后续同级时，将选择该 div

# 浏览器兼容性