:has(input:invalid) 不生效的最常见原因是 input 缺少 required、type="email" 等原生校验属性；仅 JS 校验需调用 reportValidity() 才触发 :invalid；须将 label、input、.error-message 包在共同父容器（如 .form-group）中，且确保其为最近祖先；兼容性方面，Chrome 105+、Safari 15.4+、Firefox 120+ 支持，旧版需 fallback 方案。
:has() 能直接选中包含无效输入的表单项，但必须配合原生 required、type="email" 等校验属性才生效，纯 JS 校验不会触发 :invalid 状态，也就无法被 :has(input:invalid) 捕获。
为什么 :has(input:invalid) 有时不生效
最常见原因是输入框没声明校验约束。浏览器只对带 required、pattern、type="email"、minlength 等属性的 input 元素计算 :invalid 状态。
- 写成
<input>（无任何校验属性）→ 永远不匹配:invalid - 写成
<input required>或<input type="email" required>→ 输入为空或格式错误时自动变为:invalid - JS 手动设置
input.setCustomValidity("error")后，需调用input.reportValidity()才会真正触发:invalid状态
如何高亮整个表单项（含 label 和 error 提示）
把 label、input、.error-message 包在同一个父容器里，用 :has() 直接作用于该容器：
.form-group:has(input:invalid) {
border: 2px solid #f44336;
background-color: #fff8f8;
}
.form-group:has(input:invalid) .error-message {
display: block;
}
关键点：
立即学习“前端免费学习笔记（深入）”；
- 确保
.form-group是input的**最近共同祖先**，否则:has()找不到上下文关系 - 不要用
div:has(input:invalid)这种泛选择器，容易误匹配其他无关input -
.error-message默认应设为display: none，靠:has()触发显示
兼容性与降级处理
Chrome 105+、Safari 15.4+、Firefox 120+ 支持 :has()；Edge 同 Chrome。IE 完全不支持，旧版 Android WebView 也不支持。
- 可保留传统 class 方案作为 fallback：
form-group--error由 JS 添加 - 避免仅依赖
:has()实现核心功能（如提交拦截），它只是视觉增强手段 - 若需支持 Safari 15.2–15.3，它们支持
:has()但不支持嵌套伪类（如:has(input:invalid:focus)）
真正容易被忽略的是：哪怕写了 required，如果用户没交互过，部分浏览器（如 Safari）可能不会立即应用 :invalid 样式——得等首次 blur 或 submit 触发验证。所以别指望页面一加载就高亮所有空字段，这是符合规范的行为，不是 bug。
