最常见原因是浏览器未解析：iOS 15.3及更早Safari、微信X5内核、旧版Electron直接忽略整条:has()规则，DevTools中不可见；唯一可靠验证是CSS.supports('selector(:has(*))')返回true。
为什么 div:has(p) 有时完全不生效
最常见原因不是写法错，而是浏览器压根没解析这条规则——iOS 15.3 及更早 Safari、微信 X5 内核、旧版 Electron 都会直接忽略整条 :has() 规则。DevTools 的 Styles 面板里根本看不到它，更不会报错。
验证是否可用的唯一方式是运行：CSS.supports('selector(:has(*))')。返回 true 才能用；返回 false 就必须降级。
当前（2026 年 9 月）稳定支持的版本是：
- Chrome 105+
- Safari 15.4+
- Firefox 121+
- Edge 同 Chrome 版本
Tailwind 用户还需在 tailwind.config.js 中显式启用：corePlugins: { has: true }，否则 has-[&_*] 类名会被构建工具跳过。
立即学习“前端免费学习笔记（深入）”；
:has() 内部子选择器哪些能用、哪些静默失败
括号里的选择器不是“随便写”，浏览器对合法性检查极严，写错就整条规则丢弃，且不提示。
✅ 安全可用：
input:checkedinput:invalid-
[data-status="done"]（注意属性值加引号） .error-
+ p（相邻兄弟）
❌ 无效或不可靠：
-
::before（伪元素语法非法） -
:hover（非交互容器如div:hover在 Safari 中常不触发） -
:focus-within（嵌套使用时兼容性差） -
:nth-child(2)（结构伪类不被支持）
⚠️ 注意层级语义差异：
-
section:has(p)匹配任意后代p -
section:has(> p)要求p必须是section的直接子元素
表单场景下 :has(input:focus) 为什么总选不对容器
典型错误是把 label 当作父容器去监听：label:has(input:focus)。但 HTML 中 label 和 input 往往是平级关系，靠 for 属性关联，input 并非其子元素，:has() 必然失败。
正确做法只有两种：
- 把
input显式包进label：<label>姓名<input id="name"></label> - 改用真实包裹容器，比如
.form-group:has(input:focus)，并确保 HTML 中input确实在该容器内
另外注意：:focus 是瞬态状态，依赖 DOM 结构和焦点管理逻辑。若用 JS 动态聚焦（如 input.focus()），需确保此时 input 已挂载且可聚焦。
性能和可维护性容易被低估的点
:has() 是关系型选择器，浏览器需向上遍历 DOM 树做匹配，不是简单查 class。匹配越深、目标越多，渲染开销越大。
避免这些写法：
- 链式
:has()：.form:has(.field):has(.error):has(:last-child)—— 浏览器跑三次独立匹配 - 宽泛锚定：
*:has(input:checked)或body:has(.highlight)—— 强制全树扫描 - 深层嵌套：
:has(div > ul > li > a.active)比:has(a.active)多出 3–5ms 重排耗时（Chrome Rendering 面板可观测）
真正难处理的从来不是“怎么写对”，而是“怎么写得轻”——尤其当容器本身有动画、滚动或 SSR 渲染时，:has() 的开销会立刻暴露。
