Chrome 105+、Firefox 121+、Safari 15.4+已默认支持:has()，但Safari 15.4–16.3对+/~兄弟选择器支持不稳定；:has()内禁用:hover/:focus/伪元素，:empty恒不匹配；静默失效常见于浏览器不识别、attribute未正确设置或Shadow DOM跨边界；性能敏感场景需慎用，避免嵌套:has()和宽泛选择器。
:has() 能直接根据子元素状态修改父容器样式，但不是所有浏览器都认它，也不是所有写法都生效——关键看版本、写法和 DOM 结构是否踩中支持边界。
哪些浏览器真正支持 :has() 且无需开启 flag
Chrome 105+（2022 年 9 月起）、Firefox 121+（2023 年 12 月起）、Safari 15.4+（2022 年 3 月起）已默认启用 :has()，无需手动开启实验性选项。但要注意：
- Safari 15.4–16.3 对
:has()内含+或~的兄弟选择器支持不稳定，比如.card:has(.trigger + .content)可能被静默忽略 - Firefox 120 及更早版本仍需手动开启
layout.css.has-selector.enabled，生产环境不能依赖 - Electron 应用若内核低于 Chromium 105（如旧版 VS Code、Slack），
:has()会完全不解析，DevTools 里连规则都看不到
:has() 里能写什么、不能写什么
括号内必须是“能真实匹配到 DOM 节点”的选择器，不是所有伪类都合法：
- ✅ 安全可用：
input:checked、:valid、:invalid、[data-status="error"]、button:disabled、img[src*="icon"] - ❌ 明确禁用：
:hover、:focus、:focus-within、::before、::after（伪元素无真实节点） - ⚠️ 表面合法但易失效：
:empty在:has()中永远不匹配（因为:has()自身存在已让父元素“非空”）；:nth-child(2)单独可用，但嵌套:has(:nth-child(2))不被支持
为什么写了 :has() 却没反应
常见静默失败原因不是语法错，而是浏览器根本不识别或条件不满足：
立即学习“前端免费学习笔记（深入）”；
- 父选择器被
!important规则覆盖，比如.parent { height: auto !important; }会挡住.parent:has(.child) { height: 100px; } - 用了自定义属性如
[data-open="true"]，但 JS 只改了dataset.open，没调用el.setAttribute('data-open', 'true')——:has()只读 DOM attribute，不读 JS property - 在 Shadow DOM 内部使用，
:has()默认无法跨 boundary 匹配；需透传 class 到 light DOM 或用::slotted() - 开发者工具 Styles 面板里根本看不到该规则 → 说明浏览器不支持该语法，大概率是 Safari 15.4 之前或旧版 Electron
性能敏感区慎用 :has()
:has() 要求浏览器对每个候选父元素遍历其全部后代来判断条件，DOM 深度或宽度大时开销显著：
- 实测：在含 200+ 个
<li>的列表中应用ul:has(li.active)，滚动帧率下降超 30% - 避免双重遍历，如
section:has(div:has(p))是典型反模式 - 高频更新区域（如悬停菜单、实时搜索结果）优先用
:hover+ class 切换，而非:has(:hover) - 缩小候选集：用
.nav-menu:has(> .item.active)比nav:has(.item.active)快得多
最常被忽略的一点：:has() 的计算时机依赖于 DOM 更新后的重绘流程，JS 快速连续增删 class 时，极少数情况下会出现样式延迟一帧生效——这不是 bug，是浏览器渲染机制决定的。
