:has() 关系伪类

:has() 伪类会在元素包含与参数匹配的后代元素时选中该元素。它通常被称为“父选择器”，可以根据子元素设置父元素的样式，这是 CSS 过去从未具备的能力。

.card:has(img) 会选中包含 img 后代元素的所有 .card 元素。参数是一个相对选择器列表，即描述相对于目标元素的元素的任意有效 CSS 选择器。

当表单容器包含无效输入项时为其设置样式：form:has(:invalid) { border-color: red; }。为包含标题的区块设置样式：section:has(h2) { padding-top: 2rem; }。父元素会根据子元素的状态改变外观。

:has() 可以选择前置兄弟元素，这是 + 和 ~ 无法做到的。h2:has(+ p) 会选择后面紧接着 p 元素的 h2 元素。li:has(~ .active) 会选择具有后续 .active 兄弟元素的 li 元素。

无需 JavaScript 即可响应原生表单有效性：input:has(~ .error-msg) 会为带有兄弟错误消息的输入项设置样式。label:has(+ input:required) 会为其配对输入项为必填项的标签设置样式——这一切仅使用 CSS 即可完成。

根据活动子元素突出显示导航容器：nav:has(.active) 会在任意子元素具有 active 类时，为整个 nav 应用样式。它适合在容器级别指示当前所在的导航区块。

.grid:has(.card:focus-within) 会在任意卡片获得键盘焦点时，为整个网格设置样式。.dropdown:has(:hover) 会在鼠标悬停于任意后代元素时保持下拉菜单打开，比复杂的兄弟组合器链更简洁。

与 .sidebar:not(:has(nav)) 相比，.sidebar:has(nav) 会应用不同的布局。无需 JavaScript 即可实现条件布局：特定子元素的存在或缺失会驱动父元素的布局，从而实现真正自适应、感知内容的 CSS。

带有宽泛参数选择器的 :has()（例如 :has(*)）可能会消耗较多性能，因为浏览器必须检查每个元素。请让 :has() 的参数尽可能具体。在可能的情况下，优先使用 :has(> .specific-child)（直接子元素），而不是 :has(.specific-child)（任意后代元素）。

:has() 支持 Chrome 105+、Safari 15.4+ 和 Firefox 121+。自 2023 年末起已获得完整的基线支持。不存在可用的兼容填充方案（因为需要使用 JavaScript 进行模拟），因此对于较旧的浏览器，请在该功能并非关键功能时结合渐进增强使用。

过去需要使用 JS 事件监听器的模式包括：“子元素获得焦点时为父元素添加类”“存在模态框触发器时显示覆盖层”“网格恰好包含三个项目时使用不同样式”。:has() 可以以声明式方式处理所有这些情况。

与现有的 CSS 组合器（如 + 和 ~）相比，:has() 的独特之处是什么？

:has() 是 CSS 首个真正的关系型伪类，可以选择父元素和前置兄弟元素。它支持内容驱动的样式、表单状态响应、导航突出显示，以及许多过去需要通过 JavaScript 操作 DOM 才能实现的模式，而且全部可以用 CSS 以声明式方式完成。