用 :has() 检测表单内是否有 :invalid 或自定义错误类
现代 CSS 的 :has() 确实能直接响应子元素状态，但浏览器支持有坑：Chrome 105+、Safari 15.4+ 支持，Firefox 目前（2024）仍不支持，且不支持在 @keyframes 或媒体查询中嵌套使用。
常见错误是写成 form:has(input:invalid) 却忘了表单里可能有 select、textarea，或用了 required 但没触发表单验证（比如用户还没输就点提交）。
- 必须确保错误项确实被标记为
:invalid—— 这依赖原生约束（required、type="email"等）或手动加的.error类 - 若用 JS 主动添加
.error类（比如后端校验失败），就得配合:has(.error)，不能只靠:invalid -
:has()不触发重排，但频繁切换类名仍可能引起样式抖动，建议搭配transition控制按钮颜色/opacity 变化
示例：
form:has(:is(input:invalid, select:invalid, textarea:invalid)) button[type="submit"] { opacity: 0.6; cursor: not-allowed; }
提交按钮禁用逻辑别只靠 CSS
CSS 的 :has() 只能改样式，不能真正禁用按钮交互。用户仍可点击、回车提交，导致无效请求。
立即学习“前端免费学习笔记（深入）”；
真实场景中，必须同步控制 disabled 属性：
- 监听
input、blur、change事件，实时检查所有必填/校验字段 - 用
checkValidity()方法比手动遍历:invalid更可靠（它会触发伪类更新，也兼容自定义校验） - 不要只在 JS 里设
disabled，再用 CSS 写button:disabled—— 这和:has()无关，属于兜底行为
示例判断逻辑：
function updateSubmitButton() {<br> const form = document.querySelector('form');<br> const btn = form.querySelector('button[type="submit"]');<br> btn.disabled = !form.checkValidity();<br>}
:has() 在复杂表单里的性能与选择器限制
当表单字段多（比如 20+ 个输入框），:has(input:invalid) 的匹配开销会上升，尤其在 Safari 中可能轻微卡顿；更麻烦的是，:has() 不支持「否定内部」写法，比如无法表达「有任意一个 invalid，但不是某个特定字段」。
- 避免写太长的选择器链，如
form:has(.field-group:has(input:invalid), .field-group:has(select:invalid))—— 改用统一类名.field简化为form:has(.field:invalid) - 如果字段带动态增删（如地址列表），新增的 DOM 节点不会自动触发
:has()重计算，得靠 JS 触发一次 class 切换来“唤醒” - 服务端渲染页面首次加载时，若字段已有
class="error"，:has(.error)会立即生效；但原生:invalid需要用户交互或调用reportValidity()才激活
兼容性 fallback 必须手写，没有自动降级
没有浏览器会把 :has() 当作可选特性悄悄忽略——不支持就是完全不生效，按钮样式始终不变。别指望 CSS @supports 能优雅处理。
- 最简 fallback：用 JS 检测
CSS.supports('selector(:has(*))')，不支持时走 class 控制（如form.has-errors） - 别在同一个规则里混用
:has()和旧写法，比如form:has(:invalid), form.has-errors—— 不支持:has()的浏览器会整条规则丢弃 - 如果你的项目还要支持 IE 或老 Android，那
:has()就不该出现在生产 CSS 里，纯 JS 控制更稳妥
真正难的不是写对选择器，而是想清楚：哪些错误该即时反馈（输入中），哪些该提交后才显示（异步校验）。CSS :has() 只能管前者，后者必须靠 JS 类名驱动，而且两类状态还得互斥管理，不然样式会打架。
