:has()伪类兼容性有限，Chrome 105/Firefox 103/Safari 16.4起支持，旧版本静默失效；不支持伪元素和状态伪类；构建工具可能误删；JS监听+class切换更可靠。
能用，但得看浏览器版本和具体写法；不加限制直接上 :has()，线上环境大概率挂掉。
Chrome/Firefox 最新版本才稳定支持 :has()
这个伪类在 2022 年底才被 Chrome 105、Firefox 103 正式启用，Safari 直到 16.4（2023 年 3 月）才开始支持。如果你的用户里还有大量使用 Chrome 104 或更早版本、或旧版 iOS Safari 的场景，:has() 会完全被忽略——不是报错，是静默失效。
- 检查方式：在目标浏览器控制台输入
CSS.supports('selector(:has(*))')，返回true才算真正可用 - 不能靠
@supports selector(:has(...))做降级——部分旧版 Chromium 会误判为支持，实际不生效 - Next.js / Vue CLI 等构建工具默认不处理
:has()，CSS 压缩器（如 cssnano）可能直接删掉整条规则
:has() 里不能用伪元素或某些伪类
:has() 的参数只接受“选择器列表”，但不是所有 CSS 选择器都能放进去。最常踩的坑是以为能写 div:has(::before) 或 input:has(:focus)，其实都不合法。
- 禁止出现在
:has()内部的包括：::before、::after、:hover、:focus、:active等运行时状态伪类 - 允许的典型模式：
article:has(> h2, > p:first-of-type)、label:has(input[required]) -
:has()不触发重排，但频繁嵌套（比如:has(:has(:has(...)))）会导致样式计算变慢，实测在长列表中可能卡顿
替代方案比想象中更简单：多数场景用 JS 更稳
想根据子元素有无、是否匹配某条件来改父级样式？与其赌浏览器兼容性，不如用几行 JS 监听 + 切 class。
立即学习“前端免费学习笔记（深入）”；
- 例如控制表单域边框颜色：
input.addEventListener('input', () => { input.closest('label').classList.toggle('has-value', input.value) }) - 如果子元素是动态插入的，用
MutationObserver监听新增节点，比依赖:has()的 CSS 触发时机更可控 - 服务端渲染（SSR）场景下，
:has()根本不生效，JS 补充 class 是唯一可靠路径
真正难的不是写对 :has() 语法，而是判断「这里到底值不值得用」——它省了一点 CSS 代码，但换来的是兼容性清单、测试成本、以及上线后某天突然发现老用户界面错乱的排查时间。
