:has() 选择器在旧版浏览器中因语法未实现而被静默丢弃，Chrome 105/Firefox 121/Safari 15.4 为支持分水岭；伪元素、运行时状态、嵌套 :has() 及不可见子元素均不匹配；CSS.supports 检测存在假阳性，@supports selector 亦不可靠；深层匹配性能差，需用稳定锚点替代。
不是“不生效”，是浏览器压根不认识 :has() 这个语法——整条 CSS 规则在解析阶段就被静默丢弃，连大括号里的声明都不会加载，DevTools 里也看不到它。
Chrome 105 / Firefox 121 / Safari 15.4 是分水岭
低于这些版本的浏览器，:has() 不是兼容性问题，而是语法层面未实现：
- Chrome 104 及更早：遇到
div:has(.child)直接跳过整条规则，CSS.supports('selector(:has(div))')返回false - Firefox 120：即使手动开启
layout.css.has-selector.enabled，document.querySelector('div:has(.child)')仍抛DOMException: "is not a valid selector" - Safari 15.3 及更早：完全不识别，微信 X5 内核（基于 Chromium 70–90）同理，且不会报任何提示
- 构建工具如
cssnano可能直接删掉整条含:has()的规则，连降级机会都不留
:has() 写法本身就会导致失效
就算浏览器版本达标，以下写法也会让规则被忽略或行为不一致：
-
div:has(::before)：伪元素不允许出现在:has()括号内 -
a:has(:hover)：运行时状态（如:hover、:focus）无法静态判断，所有主流浏览器都拒绝解析 -
section:has(:has(p))：嵌套:has()仅 Chrome 105+ 支持，Safari/Firefox 当前仍不认 -
div:has(.child)匹配不到display: none或visibility: hidden的子元素——这不是 bug，是规范定义：不可见后代不参与匹配
别信 CSS.supports('selector(:has(*))') 的返回值
这个检测在旧版 Chromium（Chrome 90–104）中存在假阳性：返回 true，但样式完全不渲染。它只说明语法被词法识别，不验证运行时执行能力：
立即学习“前端免费学习笔记（深入）”；
- 真正可靠的验证只有两个动作：
CSS.supports('selector(:has(div))')返回true，且目标父元素在 DevTools 的 Computed 面板中确实应用了该规则 -
@supports selector(:has())包裹的样式块，在部分构建流程中会被当作无效 CSS 删除，不能当降级开关用 - W3C 验证器报
CSS: Parse Error: )是工具滞后，不是你代码错；加空格写成body:has( .modal)就能过，但不影响浏览器行为
最容易被忽略的是性能代价和 DOM 稳定性：哪怕语法合法，:has(p a) 这类深层后代匹配会触发显著重排，尤其在 Safari 和低端设备上；而 JS 替代方案若依赖 div:nth-child(2) 这类结构选择器，DOM 微调就断掉——父元素必须有稳定 class 或 id 才能兜住。
