:has() 选择器

定义

:has() 是 CSS Selectors Level 4 引入的关系型伪类，若括号内的相对选择器能匹配到元素，则该元素本身被选中，例如 figure:has(figcaption) 选中包含图注的 figure。

能力

• 父选择：li:has(> a.active) 根据子元素状态设置父项样式；
• 前向选择：h2:has(+ p) 选中后面紧跟段落的标题；
• 表单联动：form:has(input:invalid) 在存在非法输入时改变整体样式；
• 结合 :not() 表达「不包含某内容」的容器。

意义

在 :has() 之前，CSS 选择器只能自上而下、自左向右匹配，「根据子元素选父元素」长期只能依赖 JavaScript。:has() 补齐了这一空白，大量交互状态样式得以纯 CSS 实现。

性能与支持

反向匹配对引擎的失效（invalidation）机制要求较高，浏览器为其做了专门优化。Chrome、Safari、Firefox 等主流浏览器均已支持，但复杂嵌套仍应避免滥用。