CSS :has() 按子元素状态控制父级样式的实现

我第一次在组件库里用 :has()，解决的是一个很具体的问题：卡片内部的状态徽标变成“异常”后，卡片外框、标题和操作区也要一起变色。以前通常要让 JavaScript 给父节点补一个 class；现在可以让父级直接根据子元素是否匹配来决定样式。

:has() 的核心写法是 父选择器:has(相对选择器)。例如 .card:has(.status--error) 表示“包含异常状态后代的卡片”，而 .card:has(> .status--error) 把范围收窄为“直接子元素”。本文只围绕这类父级联动，不展开成完整 CSS 选择器教程。

:has() 适合把已经存在于 DOM 中的子元素状态映射到父级样式；优先用它表达静态关系，旧浏览器或需要复杂业务状态时仍保留 class 降级。

先分清“包含后代”和“直接子元素”

最容易写错的是组合器范围。没有 > 时，选择器会继续向下查找任意后代；加上 > 后，只检查父级的第一层子元素。组件内部还有包装层时，前者更宽松；卡片状态必须由本层节点负责时，后者更安全。

    异常
  

/* 后代匹配：状态藏在一层包装里也能让卡片变为异常态 */
.card:has(.status--error) {
  border-color: #d64545;
  background: #fff5f5;
}

/* 直接子元素匹配：只有卡片自己的状态节点才触发外框 */
.card:has(> .status--error) {
  box-shadow: 0 0 0 3px rgb(214 69 69 / 14%);
}

让卡片随子元素状态切换

实际项目里，状态往往不是只有异常一种。可以把多个状态放入同一个 :has() 参数列表，逗号表示“任意一个条件成立”；也可以用 :not(:has(...)) 表达“没有某个状态”。我更倾向于把状态 class 设计成互斥集合，避免同一张卡片同时命中多个互相覆盖的规则。

/* 任意一个状态徽标命中，卡片进入需要关注的视觉组 */
.card:has(> .status--warning, > .status--error) {
  border-inline-start: 4px solid #d98b12;
}

/* 只有明确存在成功状态时才使用绿色，不把“没有错误”误当成成功 */
.card:has(> .status--success) {
  border-inline-start-color: #198754;
}

/* 未提供状态徽标时使用中性样式，保留默认组件表现 */
.card:not(:has(> .status)) {
  border-inline-start-color: #9aa4b2;
}

这里的选择器只描述静态关系，不负责改变 DOM，也不会替你生成状态。服务端渲染或前端逻辑仍要先输出 .status--warning、.status--error 这类可读状态。这样做的好处是：状态来源和视觉规则分开，组件不必为每个父级状态额外维护同步 class。

用表单校验状态联动父级提示

表单是 :has() 很自然的落点。子输入控件命中 :invalid 时，外层表单可以增加边框和提示区域；所有字段恢复有效后，父级样式自动退出。下面的示例把浏览器原生约束和父级视觉反馈放在一起。

  
    邮箱
    
  
请填写可接收通知的邮箱

/* 支持关系选择器时，子输入的无效状态直接影响表单父级 */
@supports selector(form:has(input:invalid)) {
  .account-form:has(input:invalid) {
    border: 1px solid #d64545;
    background: #fff8f8;
  }

  .account-form:has(input:invalid) .account-form__hint {
    color: #b42318;
  }
}

/* 降级方案：由现有校验逻辑给 form 添加 is-invalid */
.account-form.is-invalid {
  border: 1px solid #d64545;
  background: #fff8f8;
}

@supports selector(...) 的作用是把新选择器规则包起来；旧环境不会因为解析不了 :has() 而误伤整段样式。若项目已经有校验逻辑，可继续在提交或失焦时切换 is-invalid，不用为了兼容性再复制一套视觉组件。

落地时要留意特异性和支持边界

MDN 将 :has() 说明为基于相对选择器判断元素是否匹配的关系伪类，并指出它会采用参数中最具体选择器的特异性。实际写规则时，先控制参数复杂度，再用组件层级管理覆盖关系；不要把多个深层后代、属性和状态伪类全部塞进一个巨大选择器。

如果目标环境包含不支持 :has() 的浏览器，保留服务端或脚本维护的降级 class；如果只面向当前主流浏览器，可以把 :has() 作为默认方案，但仍建议用 @supports 包住关键规则。还要注意 :has() 不能嵌套在另一个 :has() 中，伪元素也不能作为其中的有效选择器。

常见问题

问：为什么父级没有变化？ 先确认子元素真的匹配了条件，再检查 > 是否把范围限制得过窄，最后看是否有更高特异性的规则覆盖了结果。

问：可以用 :has() 选择前一个兄弟吗？ 可以把后续兄弟组合器写进参数，例如 .title:has(+ .subtitle)，但它选择的仍是前面的 .title，不是后面的兄弟节点。

问：是否应该把所有状态都改成 :has()？ 不必。静态 DOM 关系适合用它表达；跨组件状态、权限结果和需要兼容旧浏览器的关键业务状态，继续保留明确的 class 或数据属性更容易维护。