旧版浏览器完全忽略 :has() 语法，整条规则被跳过；css.supports 检测需配合实测；js 替代方案应绑定精准事件并使用稳定锚点定位父元素。
旧版浏览器压根不识别 :has() 语法
不是“不生效”，是整条 CSS 规则被解析器直接跳过——连报错都不会有。Chrome 104、Firefox 120、Safari 15.3 及更早版本的 CSS 引擎根本没实现该语法，遇到 div:has(.child) 这种写法，就当它不存在。DevTools 的 Styles 面板里根本看不到这条规则，构建工具（如 cssnano）甚至可能在压缩时直接删掉整行，连降级机会都不留。
CSS.supports('selector(:has(div))') 返回 false 是可靠信号
这个检测比 @supports selector() 更准，也比单纯查 CanIUse 的“85% 支持率”实在。但注意：某些旧版 Chromium（如 Chrome 98）会错误返回 true 却完全不渲染，所以必须实测——动态插入一个测试元素，再用 getComputedStyle() 看样式是否真正应用。
JS 替代方案必须绑定精准事件，别滥用 MutationObserver
监听整个 DOM 树变化开销大、易误触发、清理麻烦。真实场景中，你只关心几个明确状态：
- 表单校验：监听
input的blur或change，调用el.checkValidity()后操作el.closest('.form-group') - 复选框/单选框：监听
change，不是click（避免重复触发） -
details展开：监听toggle事件，比轮询[open]属性靠谱得多 - 别用
offsetParent === null判可见性——display: none的元素仍能被querySelector找到，但你不该因此给父元素加状态类
JS 查找父元素时，class 或 id 是唯一锚点
:has() 再强，也救不了没锚点的选择器。以下写法极易断裂：
-
document.querySelector('div:nth-child(2)')—— DOM 结构微调就失效 -
document.querySelector('section > div')—— 父级嵌套一变就找不到
必须提前在 HTML 中为父容器加上稳定标识，比如 class="card" 或 id="user-form"，否则 JS 无法定位目标，样式永远挂不上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
