chrome 105+、safari 15.4+、firefox 121+是唯一可靠支持:has()的浏览器组合，旧版本会静默丢弃规则；safari 15.4–16.3对+/~兄弟选择器支持不稳定，firefox 120及更早需手动启用flag，生产环境不可依赖。
Chrome 105+、Safari 15.4+、Firefox 121+ 是唯一可靠支持组合
不是“部分支持”，而是只有这三个版本及更新的浏览器才默认启用 :has()，且行为基本一致。Chrome 105（2022年9月）起全功能支持嵌套和兄弟选择器；Safari 15.4（2022年3月）基础可用，但 15.4–16.3 对 + .sibling 或 ~ .content 有偶发忽略；Firefox 直到 121（2023年12月）才首次默认开启，此前版本即使能解析语法，document.querySelector('div:has(.child)') 仍会抛出 DOMException: "is not a valid selector"。
:has() 在旧版浏览器中是“静默失效”，不是“不生效”
低于上述版本的浏览器压根不识别 :has() 语法——整条 CSS 规则被跳过，DevTools 里看不到匹配痕迹，也不报错。构建工具如 cssnano 甚至可能直接删掉整条规则，连降级机会都不留。这不是兼容性 bug，是解析器根本没实现该语法。验证方式很简单：CSS.supports('selector(:has(div))') 返回 false，且样式在页面上完全不体现。
W3C 验证器报错 ≠ 代码有问题
nu HTML/CSS 验证器（https://validator.w3.org/nu/）仍按旧语法解析，会把 body:has(.modal) 当作错误，提示 CSS: Parse Error: )。解决方法只是加个空格：body:has( .modal) 或显式写成 body:has(>.modal)。这个空格对浏览器渲染毫无影响，纯属骗过验证器。别因此改用 JS 降级或删掉 :has()——现代浏览器原生能力已足够稳。
Angular 或其他框架里 :has() 失效，和框架无关
Angular 模板中 :has() 不生效，不是因为 <ng-container></ng-container> 或 Shadow DOM 导致结构异常，而是 Firefox 等浏览器本身未默认启用该特性。比如 Firefox 128 仍需用户手动访问 about:config 并设置 layout.css.has-selector.enabled = true，这在生产环境不可行。所以只要目标用户群包含旧版 Firefox 或微信 X5 内核（不支持 :has()），就不能依赖它驱动核心样式逻辑。
:has() 在那里就是无效声明——你得靠后端输出语义 class 或轻量 MutationObserver 来兜底，而不是指望浏览器自动升级。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
