旧浏览器完全不识别:has()，直接静默丢弃整条css规则；js降级需精准定位父元素、严格映射选择器逻辑、避免性能陷阱。
旧浏览器压根不解析:has()，不是失效而是静默丢弃
Firefox 120、Safari 15.3 及更早版本的 CSS 引擎根本不认识 :has() 这个语法。遇到 form:has(input:invalid) 这类规则，整条 CSS（包括选择器和大括号内所有声明）被直接跳过，DevTools 的 Styles 面板里根本看不到它。这不是 bug，是“语法不存在”。CSS.supports('selector(:has(*))') 在这些版本中返回 false，但构建工具如 cssnano 可能更激进——直接从最终输出中删掉整条规则，连 JS 降级的机会都不留。
用 JS 替代时，别监听 MutationObserver
监听整个子树变化开销大、易误触发、清理麻烦。真实场景只需关注几个明确状态：
- 表单校验：绑定
input的blur或change事件，调用field.checkValidity()，再操作field.closest('.form-group') - 复选框/单选框：监听
change，而非click（避免重复触发） -
<details></details>展开：监听toggle事件，比轮询[open]属性更精准
别用 offsetParent === null 判元素可见性——display: none 的元素仍能被 querySelector 找到，但你不该因此给父元素加状态类。
JS 判定逻辑要严格对应 :has() 原意
把括号里的条件翻译成 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') 更稳。
父元素必须有稳定标识，否则 JS 找不到目标
JS 降级方案成败的关键不在逻辑多复杂，而在能否精准定位父元素。不能依赖 div:nth-child(2) 这类结构脆弱的选择器；必须给父元素加明确、稳定的标识，比如 class="form-group" 或 id="login-form"。否则 closest() 或 querySelector 找不到目标，样式就永远挂不上。
最容易被忽略的是：:has() 在懒加载图片、动态插入节点等场景下可能触发重排重绘，尤其在 Safari 和低端设备上表现明显。JS 降级方案虽绕开兼容性问题，但若频繁操作 class 或触发布局计算，同样会带来性能陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
