旧浏览器解析时直接丢弃 :has() 规则，连声明都不加载；@supports selector(:has()) 无效，需用 css.supports('selector(div:has(.invalid))') 运行时检测并加空值与 dom 就绪判断；js 降级应绑定具体事件、依赖稳定 html 锚点、精准判定子元素可见性与状态。
旧浏览器遇到 :has() 会直接丢弃整条规则
不是“不生效”，是解析阶段就被跳过——div:has(.error) { color: red; } 在 Chrome 104、Safari 15.3、Firefox 120 等环境中，连大括号里的声明都不会加载，DevTools 的 Styles 面板里根本看不到它。构建工具如 cssnano 还可能在打包时直接删掉整行，连降级机会都不留。
所以别指望靠 @supports selector(:has(a)) 做 CSS 层降级：这个语法本身在 Safari ≤15.3、Firefox ≤108、IE11 中就不被识别，@supports 块会被整个忽略，兜底样式压根不会进入渲染流程。
用 CSS.supports('selector(:has(...))') 做运行时检测要加兜底判断
真正能用的检测只有一行 JS，但必须处理两个关键前提：
-
CSS.supports在 IE11 中不存在，得先判空：if (!CSS?.supports) { useFallback(); return; } - 检测必须在 DOM ready 后执行，否则
document.createElement创建的测试元素没挂载到 document，会导致误判为不支持 - 别只测
selector(:has(*))——它在旧版 Chromium（Chrome 90–104）中有假阳性，返回true但样式完全不渲染；应测具体用例，比如CSS.supports('selector(div:has(.invalid))')
检测通过后，再动态插入对应样式块或添加 class；检测失败则立刻走 JS 降级路径，不要等样式加载完再判断。
JS 替代方案要避开 MutationObserver 和结构脆弱选择器
常见错误是监听整个 document.body 的 MutationObserver，开销大、易误触发、清理麻烦，且对表单校验这类场景过度泛化。
更轻量精准的做法是绑定具体事件：
- 表单输入校验：监听
input的blur或change，调用el.checkValidity()，再操作el.closest('.form-group') - 复选框/单选框：监听
change（不是click），避免重复触发 -
<details></details>展开收起：监听toggle事件，比轮询[open]属性可靠得多
父元素必须有稳定标识，比如 class="form-group" 或 id="login-form"；绝不能依赖 div:nth-child(2) 或 section > div:first-of-type 这类结构选择器——DOM 微调就断掉。
写 JS 判定逻辑时要注意子元素可见性与状态边界
:has(.child) 匹配的是“存在且参与渲染流”的子元素，display: none 或 visibility: hidden 的元素不参与匹配。JS 里不能简单用 querySelector 存在性判断：
- 错：
el.querySelector('.child') !== null——会把display: none的也当有效 - 对：
el.querySelector('.child')?.offsetParent !== null（排除不可见干扰） - 对：
el.querySelector('input[type="checkbox"]:checked') !== null（显式限定 type，防误匹配） - 对：
Array.from(el.querySelectorAll('input')).some(i => !i.checkValidity())（注意checkValidity()不触发原生提示）
最易被忽略的是：JS 动态切换 class 有微小延迟，别写 el.querySelector('.child.active') 这种双重 class 判定；改用 el.querySelector('.child')?.classList.contains('active') 更稳。
真正难的不是写几行 JS，而是让 JS 找得到目标父元素、判得准子元素状态、且不拖慢渲染。所有降级都建立在 HTML 有稳定锚点、事件可精准捕获、判定逻辑不依赖渲染时机的基础上——没这些，:has() 的优雅就只能留在现代浏览器里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
