Chrome 105+、Safari 15.4+、Firefox 121+是当前唯一可靠支持:has()的浏览器组合，旧版本会静默丢弃规则；验证器报错可通过加空格绕过，但生产环境需以CSS.supports和实际渲染为准。
现在可以直接用 :has()，但必须按浏览器版本和写法分情况处理——不是“写了就能生效”，而是“写了之后得看谁认、谁不认、谁认一半”。
Chrome 105+、Safari 15.4+、Firefox 121+ 是当前唯一可靠组合
截至 2026 年中，只有这三个版本及更新的浏览器默认启用 :has()，且行为一致：
-
Chrome 105+（2022 年 9 月起）：全功能支持，包括嵌套:has(:has(...))、兄弟选择器:has(+ .sibling) -
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() 在 Firefox 和旧 Safari 中失效的典型现象
你写的规则在 Chrome 里好好的，一换浏览器就“没反应”，常见原因如下：
立即学习“前端免费学习笔记（深入）”；
-
Firefox < 121：直接不识别:has()，整条 CSS 规则被跳过；document.querySelector('div:has(.child)')会抛DOMException: "is not a valid selector" -
Safari 15.4–16.3：能解析:has(.child)，但遇到:has(+ .trigger)或:has(~ .content)可能完全不触发样式 - 所有旧版：不支持
@supports selector(:has(*))的准确检测，部分 Chromium 旧版会返回true却不执行，不能靠它做降级开关
验证是否真支持？打开控制台运行：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()——现代浏览器原生能力已足够稳，没必要为验证器牺牲表达力
验证器报错 ≠ 代码有问题，别让它干扰开发节奏。
什么时候该放弃 :has()，改用 JS 补位
:has() 不是银弹。以下场景，JS 明显更可控、更兼容、更可测：
- 需要支持
Firefox < 121或Safari < 15.4（比如企业内网还跑着 macOS 12.2） - 子状态由 JS 控制（如
el.classList.toggle('error')），而非原生伪类（:valid、:checked） - 服务端渲染（Next.js/Nuxt/Vue SSR）：HTML 初始渲染时
:has()不起作用，必须用useEffect或useLayoutEffect补 class - 要响应多个父级、或触发非样式行为（埋点、API 调用、滚动定位）
最常被忽略的一点：性能敏感区域（如无限滚动列表、高频 hover 区域）里滥用 :has()，会导致重绘卡顿——这时候哪怕浏览器支持，也该主动退回到 JS + class 切换。
