:has()在Chrome 105+、Firefox 119+、Safari 15.4+稳定支持，旧版Safari及部分Electron内核完全忽略；仅支持:checked、:valid/:invalid、[open]及真实存在的class等有限伪类与选择器，禁用:focus/:hover等；需注意层级写法、DOM属性匹配及Shadow DOM限制，不兼容环境须降级JS方案。
能用，但得看浏览器和写法是否踩中兼容性雷区。 Chrome 105+、Firefox 119+、Safari 15.4+ 已稳定支持 :has()，但旧版 Safari（尤其是 iOS 15.4 之前）和部分 Electron 内核仍会完全忽略该规则——不是样式错，是压根不解析。
哪些子元素状态可以直接触发:has()匹配
不是所有伪类都能塞进 :has() 括号里。当前最稳妥的是：
-
:checked（<input type="checkbox">或<input type="radio">） -
:valid/:invalid（配合required、type="email"等原生校验） -
[open]（<details>原生展开状态） - 普通类名切换，比如
.active、.error—— 只要 DOM 上真实存在这个 class
⚠️ 避免用：:focus、:hover、:focus-within（Safari 15.4–16.3 不支持嵌套这些）、::before 等伪元素（语法非法）。
:has()里写选择器时的层级陷阱
括号内写得太宽或太窄，都会导致匹配失败：
立即学习“前端免费学习笔记（深入）”；
- 写
.parent:has(.child)→ 匹配任意后代，包括孙子、曾孙，只要存在.child就生效 - 写
.parent:has(> .child)→ 要求.child必须是.parent的**直接子元素**，中间不能隔层 - 写
.parent:has(input:checked)→ 正确；但写成.parent:has(:checked)就可能误匹配其他表单控件（比如<select>的:checked语义不明确） - 不要写
.parent:has(.child.active)去等两个 class 同时存在——如果 class 是 JS 动态增删的，得确保 DOM 更新后浏览器重绘时机对得上（通常没问题，但极端快速 toggle 下偶有延迟）
为什么有时加了:has()却没反应
常见静默失败原因：
- 父选择器本身被更早的 CSS 规则覆盖，比如
.parent { height: auto !important; }会挡住.parent:has(.child) { height: 100px; } - 用了自定义属性如
[data-open="true"]，但 JS 没真正调用el.setAttribute('data-open', 'true')，只改了dataset.open——:has([data-open="true"])只认 DOM attribute，不认 JS property - 在 Shadow DOM 内部使用，
:has()默认无法跨 shadow boundary 匹配，得靠::slotted()或透传 class 到 light DOM - 开发工具里看到元素上有 class，但检查 computed styles 时发现
:has()规则根本没出现在 Styles 面板里 → 说明浏览器根本不识别该语法，大概率是兼容性问题
真正难搞的不是怎么写，而是当你要支持 IE 或微信内置浏览器（X5 内核）时，:has() 会彻底失效——这时候必须 fallback 到 JS 监听 + class 切换，别硬扛。
