CSS :has() 按表单校验状态切换父级样式

表单字段变成 :invalid 后，如果还要靠 JavaScript 给外层卡片加错误类名，维护成本会随着字段数量一起上升。CSS :has() 可以直接让父级根据子控件状态切换样式：用具体的容器作锚点，用 > 限定直接子元素，再把默认样式放在不依赖 :has() 的规则里。这样能做到“字段校验状态变化，容器边框和提示同步变化”，同时保留旧浏览器的可用降级。

用 :has() 让表单容器跟随字段状态

先把状态承载对象设计清楚。下面的结构里，.field 只包住标签、输入框和错误提示；父级规则因此只需要观察一个小范围，不会把整棵页面 DOM 都纳入匹配。

  
  

    邮箱
    请输入有效邮箱
  

关键选择器是 .field:has(> input:invalid)。它先选中字段容器，再检查是否存在直接子元素 input:invalid。输入有效时可以用 :valid 切换成功边框；没有填写时，required 与 :invalid 的默认验证状态会自然参与匹配。

/* 默认状态不依赖 :has()，让基础表单始终可用 */
.field {
  border: 1px solid #cbd5e1;
  padding: 12px;
  border-radius: 8px;
}

/* 只观察字段容器的直接输入控件，避免误匹配嵌套表单 */
.field:has(> input:invalid) {
  border-color: #dc2626;
}

/* 错误提示只在同一个字段出现无效控件时显示 */
.field:has(> input:invalid) > .error-text {
  display: block;
}

/* 有效状态使用另一种明确结果，避免同时命中错误规则 */
.field:has(> input:valid) {
  border-color: #16a34a;
}

降级与性能边界要一起设计

:has() 已经是广泛可用的 CSS 特性，但生产表单仍应保留基础样式。可以把增强规则放进 @supports selector(...)，不支持该选择器的浏览器仍能显示输入框；如果需要错误提示，HTML 中也可以保留说明文本，或由服务端返回校验信息。

/* 旧环境至少保留可读的默认提示和输入轮廓 */
.error-text {
  display: none;
  color: #b91c1c;
}

/* 支持 :has() 时再启用父级联动增强 */
@supports selector(.field:has(> input:invalid)) {
  .field:has(> input:invalid) > .error-text {
    display: block;
  }
}

性能上要记住两个边界。第一，锚点不要写成 body:has(...)、:root:has(...) 或 *:has(...)；页面任意 DOM 变化都可能扩大重新检查范围。第二，内部选择器不要无条件使用深层后代，例如 .ancestor:has(.foo)，能明确直接关系时改成 .field:has(> input:invalid)，让浏览器只关注字段容器的直接子节点。若要把状态提升到表单组件，也应从具体的 .container 开始：

/* 组件级锚点只观察自己的字段，不把范围扩大到整页 */
.container:has(> .field:has(> input:invalid)) {
  border-color: #dc2626;
}

/* body 和 :root 适合解释过宽范围，不作为默认锚点 */
body:has(.error-text) { /* 范围过宽，示意性写法 */ }
:root:has(.error-text) { /* 范围过宽，示意性写法 */ }

把字段联动迁移成可维护的规则

如果旧代码是“监听 input 事件、切换父节点 class、再控制提示文本”，迁移时不要一次性把所有逻辑删掉。先保留 HTML 的语义和服务端校验，再把稳定的视觉反馈移到 CSS：字段容器负责局部状态，表单容器只负责是否存在错误，JavaScript 只处理需要业务决策的异步校验。

实际改造可以按这个顺序检查：锚点是否是具体组件类名；:has() 内部是否能用 > 或 +；默认样式在不支持时是否仍可读；有效和无效规则是否会同时命中；动态表单是否限制了组件的 DOM 范围。这个检查清单比单纯把父选择器写出来更重要。

常见问题

CSS :has() 能不能直接选择任意祖先元素？

可以在锚点元素上根据相对选择器匹配后代或相邻关系，但应把锚点限制在具体组件容器，不能把它当成全页面状态扫描器。

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

先检查浏览器是否支持该选择器、内部选择器是否写成了正确的相对选择器，以及 > 是否误把实际嵌套层级排除。增强规则应配合 @supports 和基础样式。

表单校验一定要用 :has() 替代 JavaScript 吗？

不一定。视觉状态和简单字段反馈适合交给 CSS；异步唯一性校验、跨字段业务规则和提交阻止仍需要 JavaScript 或服务端校验。