chrome 105+、edge 105+、safari 16.4+、firefox 121+ 默认稳定支持 :has()；safari 15.4–16.3 对 +/~ 关系符偶发忽略，firefox 120 及更早需手动启用且不可用于生产。
:has() 现在可以直接用，但必须按浏览器版本和写法分情况处理——不是“写了就能生效”，而是“写了之后得看谁认、谁不认、谁认一半”。
哪些浏览器版本真正支持 :has()？
截至 2026 年 9 月，仅以下组合默认启用且行为一致：
- Chrome 105+（2022 年 9 月起）、Edge 105+（同 Chromium 版本）
- Safari 15.4+（2022 年 3 月起），但 Safari 15.4–16.3 对
+/~关系符有偶发忽略，建议升到 16.4+ 再用复杂关系 - Firefox 121+（2023 年 12 月起首次默认启用；120 及更早需手动开启
layout.css.has-selector.enabled，生产环境不可依赖）
低于这些版本的任何浏览器，:has() 规则都会被静默丢弃——DevTools 里看不到匹配痕迹，也不报错，容易误判为 CSS 写错了。
怎么验证当前浏览器是否真支持 :has()？
不能只查 Can I Use，得在运行时实测。最可靠的方式是主动触发 DOM 查询：
- 执行
document.querySelector('body:has(div)')：若返回null或抛出SyntaxError: ':has()' is not a valid selector，说明不支持 - 用
@supports selector(:has(*))包裹 CSS 规则——但注意：iOS 15.3 及更早连这个语法都不认，会直接跳过整段样式 -
CSS.supports('selector(:has(div))')返回true仅是必要条件，必须配合实际渲染效果确认
W3C 验证器报错但浏览器正常？
nu HTML/CSS 验证器（https://validator.w3.org/nu/）仍按旧语法解析，会把 body:has(.modal) 当作错误，提示 CSS: Parse Error: )。
- ✅ 正确修复：
body:has( .modal)（括号后加空格）或body:has(>.modal)（显式用子组合器） - ⚠️ 注意：这个空格对浏览器渲染毫无影响，
:has(.modal)和:has( .modal)完全等价，只是骗过验证器 - ❌ 不要改成 JS 降级或删掉
:has()——现代浏览器原生能力已足够稳，没必要为验证器牺牲表达力
为什么 PostCSS 无法 polyfill :has()？
因为 :has() 的匹配依赖 DOM 实时结构，不是静态可展开的语法：
-
div:has(+ input:invalid)要检查兄弟节点状态，构建时根本无法预判哪些input会变invalid - 所有已知 PostCSS 插件（如
postcss-selector-matches）遇到:has()都会跳过或报错，不会生成 fallback - 生产环境可用的 Polyfill 方案只有
polyfill-pseudoclass-has：它不改写 CSS，而是增强原生 DOM 方法（querySelector/matches等），对业务代码零侵入
真正难处理的不是“怎么加 polyfill”，而是那些被 :has() 掩盖的 DOM 结构问题——比如用 display: none 隐藏子元素却仍希望父级响应，此时 :has() 依然会匹配成功，JS 替代方案反而更容易加 offsetParent 判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
