:has()伪类在旧版浏览器中未被识别，整条CSS规则被静默跳过；Firefox 120、Safari 15.3及更早版本不支持，CSS.supports检测存在假阳性，构建工具可能直接删除规则，且父元素需有稳定class标识。
旧版浏览器根本没实现:has()语法
不是“不生效”，是解析器直接不认识这个东西。Firefox 120、Safari 15.3 及更早版本的 CSS 引擎压根没注册 :has() 这个伪类标识符，遇到 form:has(input:invalid) 这种写法，整条规则（包括大括号里的所有声明）被静默跳过，DevTools 里看不到匹配痕迹，控制台也不报错。
这和 :focus-within 或 :is() 的渐进支持不同——:has() 在未实现版本里属于“语法错误级缺失”，不是功能开关可调的问题。
-
CSS.supports('selector(:has(*))')在旧 Chromium 中可能返回true，但实际不执行样式，属于假阳性，不能用作降级依据 - 构建工具如
cssnano可能直接删掉整条:has()规则，连 fallback 都不留 - Firefox document.querySelector('div:has(.child)') 会抛
DOMException: "is not a valid selector"
:has()在哪些版本才算真正可用
截至 2026 年 7 月，只有三个版本及更新的浏览器组合提供稳定、一致的支持：
-
Chrome 105+（2022 年 9 月起）：全功能支持，包括嵌套:has(:has())和兄弟选择器:has(+ .sibling) -
Safari 16.4+：修复了 15.4–16.3 中对+/~的偶发忽略问题，推荐作为最低门槛 -
Firefox 121+：首次默认启用，此前版本需手动开启layout.css.has-selector.enabled，生产环境不可依赖
低于这些版本的任何浏览器，:has() 规则都等同于不存在。别信 CanIUse 上的“85% 全球支持”——企业内网、微信 X5 内核、安卓 WebView 等场景仍大量卡在 Chrome 70–90 区间。
立即学习“前端免费学习笔记（深入）”；
为什么@supports selector(:has())不可靠
@supports selector(:has(*)) 在旧版 Chromium 中常返回 true 却不渲染样式，属于检测机制与实际引擎行为脱节。它只检查语法识别能力，不验证运行时执行能力。
更糟的是，部分构建流程会把整个 @supports 块当作无效 CSS 删除，导致连降级样式都失效。
- 不要用
@supports包裹关键逻辑，比如表单校验反馈 - 验证是否真支持，必须打开 DevTools 的 “Computed” 面板，看目标元素是否实际应用了该规则
-
CSS.supports('selector(:has(div))')返回true≠ 样式生效，二者必须同时满足
容易被忽略的兼容性陷阱
即使浏览器版本达标，:has() 仍可能因写法或上下文失效：
- W3C 验证器（nu validator）会把
body:has(.modal)报为CSS: Parse Error: )，但加空格写成body:has( .modal)就能过——这只是骗过工具，对浏览器毫无影响 -
:has()内部不支持伪元素（::before）、:not()嵌套、:scope，也不支持深层后代（如:has(.wrapper .trigger)） - 动态插入节点后，
:has()不会自动重触发；React/Vue 初始渲染时 DOM 未挂载完成，也可能导致判断为 false - 性能敏感：Chrome DevTools Rendering 面板可见，
:has(div > ul > li > a.active)比:has(a.active)多出 3–5ms 重排耗时
最易被绕过的点是：父元素必须有稳定标识（如 class="form-group"），不能依赖 div:nth-child(2) 这类结构脆弱的选择器——JS 替代方案也一样，没 class 就找不到目标。
