CSS :has选择器实现父级状态样式的边界

表单卡片、筛选面板这类组件经常需要“子元素出错时，父级也变红”或“标题后面紧跟副标题时，标题间距变小”。过去通常要给父元素额外加 class，或者用 JavaScript 同步状态。CSS :has() 可以把这类关系直接写进选择器，但它不是“任意向上查找”的万能开关：需要先限定锚点，再处理兼容和特异性。

先把 :has() 当作关系条件理解

:has() 的括号里放的是相对选择器，真正被选中的仍是冒号前面的锚点。它适合表达“这个容器里面是否存在某种状态”，也可以表达“这个元素后面是否紧跟另一个元素”。例如下面的规则只给包含无效输入的字段卡片增加边框：

.field {
  border: 1px solid #d7dce5;
}

.field:has(> input:invalid) {
  /* 只检查直接子输入，父级状态由输入的校验结果驱动 */
  border-color: #d64545;
  background: #fff7f7;
}

这里的 > 很重要：它把条件限制为字段的直接子元素。如果输入被包在更深层的装饰容器里，可以改用 .field:has(.control > input:invalid)，但要确认这个组件的 DOM 层级稳定。相邻兄弟也可以作为条件，例如 h2:has(+ p) 只匹配后面紧跟段落的标题。

用 @supports selector() 做渐进增强

MDN 将 :has() 标为广泛可用，但项目仍可能需要照顾旧版内嵌 WebView 或长期未升级的企业浏览器。不要把增强规则和必须存在的基础规则混在一个包含未知伪类的选择器列表里，否则不支持它的浏览器可能丢弃整条规则。推荐把回退与增强拆开：

.field.is-invalid {
  /* 旧浏览器和脚本都能使用的显式回退状态 */
  border-color: #d64545;
}

@supports selector(:has(*)) {
  .form-card:has(.field:where(input:invalid, select:invalid)) {
    /* 支持关系选择器时，容器状态跟随字段状态变化 */
    box-shadow: 0 0 0 3px rgb(214 69 69 / 15%);
  }
}

如果业务必须覆盖所有目标环境，可以继续由表单校验脚本写入 .is-invalid；:has() 作为无脚本或少状态同步的增强层。用 CSS.supports("selector(:has(a))") 做脚本侧判断时，也只判断能力，不要把它当作页面已经完成状态同步的证明。

控制参数特异性与选择器范围

:has() 自身不额外增加一格特异性，它采用参数列表中最具体选择器的特异性。因此 .panel:has(#important) 可能因为参数里的 ID 变得很难覆盖。组件代码中更稳妥的做法是使用类选择器，并用 :where() 把不希望参与竞争的条件降为零：

.panel:has(:where(> .notice.is-active)) {
  /* :where() 让状态条件不额外抬高特异性，便于主题覆盖 */
  --panel-accent: #3b6eea;
}

/* 组件外部仍可用一个普通类覆盖主题变量 */
.theme-quiet .panel {
  --panel-accent: #687386;
}

性能上不要从 body、:root 或通配符开始，再在括号里放一个宽泛后代条件；DOM 变化时浏览器可能需要反复检查很大的子树。优先从 .form-card 这类具体容器开始，并尽量使用 >、+ 或明确的状态类。真正复杂的列表筛选，应先测量交互频率和 DOM 规模，再决定是否把状态写回 class。

用组件边界决定是否采用

可以采用 :has() 的场景通常有三个特征：状态来源已经存在于 DOM，关系范围属于一个小组件，旧环境有可接受的基础样式。比如“卡片含有选中复选框”“标题后面有副标题”“字段含有无效控件”都很适合。相反，如果状态来自异步请求、跨组件业务流程或高频批量 DOM 更新，显式 class 往往更容易调试。

落地前按这张清单检查：

相关问题

:has() 能直接选择父元素吗？

它能让父级或前一个兄弟根据相对选择器匹配结果获得样式，但被选择的仍是冒号前的锚点；不能把它理解成 JavaScript 的任意 DOM 向上遍历。

为什么 :has() 写了却整条 CSS 不生效？

先确认目标浏览器是否支持，再检查括号中的相对选择器、DOM 层级和选择器特异性。需要兼容旧环境时，将增强规则放进 @supports selector(:has(*))，并保留独立回退规则。

参考规范：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has；https://www.w3.org/TR/selectors-4/