:has() 表单校验联动失效主因是其不支持伪元素及未交互时的原生伪类（如:invalid），且仅依赖样式树快照、不监听状态变化；应改用:user-invalid或js控制类名实现可靠匹配。
为什么直接用 :has() 做表单校验联动会失效？
因为 :has() 不支持伪元素（如 ::placeholder）和某些伪类（如 :invalid 在未交互前可能不触发），更关键的是：**浏览器对 :has() 中可选中目标的选择器有限制**——它只接受“能被 CSS 选择器合法匹配的元素”，而原生表单校验状态（如 :valid、:invalid、:user-invalid）在用户未输入或未失焦前，往往不会被渲染引擎标记为可响应的状态。
所以常见错误是写成这样，但实际不生效：
form:has(input:invalid) .error-message { display: block; }
原因：input 初始为空时，:invalid 可能不匹配（尤其没设 required 或类型校验规则时），且 :has() 不监听 DOM 属性变化，只依赖当前样式树快照。
:has() 联动必须依赖显式可检测的 DOM 状态
绕过原生伪类不可靠的问题，改用可控的属性或类名作为判断依据。推荐两种稳定路径：
- 给
<input>添加required或type="email"等约束，并配合:user-invalid—— 它比:invalid更晚触发，仅在用户编辑后校验失败时生效，:has()能可靠捕获 - 用 JavaScript 主动添加/移除类（如
is-invalid），让:has()查找该类，完全脱离原生状态时机干扰
示例（纯 CSS，无需 JS）：
form:has(input:user-invalid) .error-message { opacity: 1; }
注意：:user-invalid 是目前最稳妥的原生伪类选项，Chrome 105+、Safari 15.4+、Firefox 121+ 支持；旧版 Firefox 需降级为 JS 控制类名。
如何让错误提示在输入过程中实时响应？
:has() 本身是静态匹配，无法“监听”输入事件，但可以通过组合伪类模拟近实时反馈：
-
input:not(:placeholder-shown):invalid可判断「有内容但无效」，适合配合placeholder使用 -
input:focus:invalid捕获焦点中即报错的场景（如邮箱格式错） - 把多个条件用
,并列写进:has()的参数里，例如：
form:has(input:user-invalid, input:focus:invalid, input:not(:placeholder-shown):invalid) .error-message { display: block; }
这样覆盖了用户编辑后失焦、正在输入、以及 placeholder 消失后的三种典型错误态。但要注意：每个条件都会增加样式计算开销，简单表单用 :user-invalid 单独判断通常已足够。
兼容性与 fallback 必须手动处理
:has() 在 Safari 15.4+、Chrome 105+、Edge 105+ 支持，Firefox 121+ 才支持（之前版本需 JS 替代）。不能假设所有环境都可用：
- 用
@supports selector(:has(*))包裹:has()规则，避免不支持时整个样式块失效 - 在
@supports外层写降级样式（比如默认显示错误提示，再用:has()隐藏它） - 如果项目需支持 iOS 15.3 或旧 Android Webview，
:has()方案应整体弃用，改用input事件 +classList.toggle()
容易忽略的一点：表单重置（<button type="reset"></button>）不会自动清除 :user-invalid 状态，需监听 reset 事件并手动移除自定义校验类，否则 :has() 会持续匹配错误态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
