旧版浏览器不支持 :has()，整条规则被静默丢弃；Firefox 120/Safari 15.3 未实现该语法，CSS.supports() 返回 false；应监听 blur/change/toggle 等精准事件替代 MutationObserver；JS 替代需用 querySelector + 状态判断并确保父元素有稳定标识。
旧版浏览器根本不认识 :has()，不是“不生效”，是整条规则被静默丢弃——你必须用 JS 主动判断并加类，没有捷径。
为什么 :has() 在 Firefox 120 或 Safari 15.3 里完全没反应
这些浏览器的 CSS 解析器压根没实现 :has() 语法。遇到 form:has(input:invalid) 这种写法，引擎直接跳过整条规则（包括大括号里的所有声明），DevTools 里都看不到它被加载。这不是 bug，是“不存在”。CSS.supports('selector(:has(*))') 在这些版本里返回 false，但很多构建工具（比如 cssnano）甚至会直接删掉整条规则，连降级机会都不留。
监听哪些事件比 MutationObserver 更精准、更轻量
别一上来就用 MutationObserver 监听整个子树——开销大、易误触发、清理麻烦。真实项目里，你只关心几个明确状态：
- 表单校验：绑定
input的blur或change，调用field.checkValidity()，再操作field.closest('.form-group') - 复选框/单选框：监听
change，而不是click（避免重复触发） - details 元素展开：监听
toggle事件，比轮询[open]属性靠谱得多 - 避免用
offsetParent === null判可见性——display: none的元素仍能被querySelector找到，但你不该因此给父元素加状态类
:has() 常见写法对应的 JS 替代逻辑
把括号里的条件翻译成 JS 可判定的真实 DOM 状态，再手动增删 class：
立即学习“前端免费学习笔记（深入）”；
-
div:has(.error)→el.querySelector('.error')?.offsetParent !== null（排除display: none干扰） -
.card:has(input:checked)→el.querySelector('input[type="checkbox"]:checked') !== null（显式限定 type，防误匹配） -
form:has(input:invalid)→Array.from(el.querySelectorAll('input')).some(i => !i.checkValidity())（注意：单个checkValidity()不触发原生提示） - 别写
el.querySelector('.child.active')这种双重 class 判定——JS 动态切换 class 有微小延迟，用el.querySelector('.child')?.classList.contains('active')更稳
最易被忽略的是：父元素必须有稳定标识（比如 class="form-group" 或 id="login-form"），不能依赖 div:nth-child(2) 这类结构脆弱的选择器；否则 JS 找不到目标，样式就永远挂不上。
