旧版浏览器不支持:has()，css解析器直接跳过整条规则，包括选择器和大括号内所有声明；chrome 105+才默认启用该伪类。
旧版浏览器压根不认识:has()语法
不是“不生效”，是 CSS 解析器直接跳过整条规则——包括选择器和大括号里的所有声明。Chrome
特别注意：document.querySelector('div:has(.child)') 在 Firefox 120 或 Safari 15.3 中会直接抛出 DOMException: "is not a valid selector"，说明 JS 层面也拒绝解析该语法。
CSS.supports('selector(:has(*))') 返回 true ≠ 真可用
这个检测在旧版 Chromium（如 Chrome 90–104）中存在假阳性：返回 true，但样式完全不应用。不能用它做降级开关，更不能包裹整段 CSS 做 @supports 条件判断——旧浏览器会跳过整个块，新浏览器又可能因解析差异漏掉部分规则。
真正可靠的验证方式只有两个：
• 运行 CSS.supports('selector(:has(div))') 并确认返回 true
• 同时在页面上检查对应父元素是否真实渲染了预期样式
构建工具可能直接删掉:has()规则
像 cssnano 这类优化工具，在识别到不支持的语法时，不是保留它、让它静默失效，而是直接从输出 CSS 中删掉整条规则——连降级机会都不留。如果你用的是默认配置的 Vite 或 Webpack + css-minimizer-webpack-plugin，很可能上线后才发现某块样式彻底消失。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
临时规避方法：
• 关闭相关插件的语法压缩选项
• 或提前用 PostCSS 插件（如 postcss-has-pseudo）做简单转译（仅限基础场景，如 :has(+ li)）
伪元素、动态伪类、嵌套组合全都不支持
:has() 的参数只能是能实际匹配到 DOM 节点的选择器。以下写法在所有浏览器里都无效或未定义：
-
div:has(::before)—— 伪元素不生成真实节点 -
a:has(:hover)——:hover是运行时状态，无法在样式计算阶段确定 -
section:has(:has(p))—— 嵌套:has()目前仅 Chrome 105+ 支持，其他浏览器直接解析失败 -
label:has(input:focus-visible)—— 焦点状态不稳定，容易漏判
最容易被忽略的是：哪怕语法合法，:has(p a) 这类深层后代匹配也会触发显著重排开销，尤其在 Safari 和低端设备上，布局抖动比样式没生效更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
