:has()在旧版浏览器中不可用，因其解析器根本不识别该语法，整条CSS规则被静默丢弃；Firefox 120、Safari 15.3及更早版本完全不支持，@supports检测存在假阳性，真正可用的最低版本为Chrome 105+、Safari 16.4+、Firefox 121+。
:has() 在旧版浏览器中不可用，不是“不生效”，而是解析器压根不认识这个语法——整条 CSS 规则（包括选择器和大括号里的所有声明）被静默丢弃，DevTools 看不到、控制台不报错、样式完全不参与计算。
Firefox 120 / Safari 15.3 及更早版本直接跳过整条规则
这些版本的 CSS 引擎没注册 :has() 这个伪类标识符。遇到 form:has(input:invalid) 这种写法，词法分析阶段就判为非法 token，整条规则被丢弃。JS 层同样拒绝：document.querySelector('div:has(.child)') 在 Firefox 120 或 Safari 15.3 中会直接抛出 DOMException: "is not a valid selector"。
@supports selector(:has()) 检测不可靠
这个检测只反映“语法是否被识别”，不等于“功能可用”：
- Chrome 90–104：返回
true，但样式完全不渲染 - Safari ≤16.3：可能返回
true，却忽略+或~关系选择器 - 构建工具（如 cssnano 默认配置）可能把整个
@supports块删掉，连降级样式都丢失
真正验证方式只有两个：CSS.supports('selector(:has(div))') 返回 true，且目标元素在 DevTools 的 “Computed” 面板中实际应用了该样式。
构建工具可能直接删除 :has() 规则
像 cssnano 这类压缩工具，在识别到不支持的语法时，不是保留它让它静默失效，而是直接从输出 CSS 中删掉整条规则——连 fallback 都不留。Vite 或 Webpack + css-minimizer-webpack-plugin 默认配置下，上线后才发现某块样式彻底消失，是常见线上事故。
立即学习“前端免费学习笔记（深入）”；
真正可用的最低浏览器版本
截至 2026 年 8 月，仅以下组合提供稳定、一致的支持：
-
Chrome 105+（2022 年 9 月起）：全功能，含嵌套:has(:has())和兄弟选择器 -
Safari 16.4+：修复了 15.4–16.3 对+/~的偶发忽略 -
Firefox 121+：首次默认启用；120 及更早需手动开启layout.css.has-selector.enabled，不可用于生产
低于这些版本的任何浏览器，:has() 规则都等同于不存在。企业内网、微信 X5 内核、安卓 WebView 等场景仍大量卡在 Chrome 70–90 区间，不能只看 CanIUse 的“85% 全球支持”数字。
:has(p a) 这类深层后代匹配也会触发显著重排开销，尤其在 Safari 和低端设备上，布局抖动比样式没生效更难排查。 
