:has() 伪类仅在 Chrome 105+ 默认可用，Firefox 需手动启用标志，Safari 完全不支持，仅适用于渐进增强；它不支持伪元素、动态伪类及深层嵌套，权重遵循常规层叠规则，调试时需关注 DevTools 中的无效提示。
伪类 :has() 在 Chrome 105+ 才真正可用
别在旧版浏览器里折腾它，:has() 不是“写完就能用”的特性。Chrome 105 是首个默认启用该伪类的稳定版，Firefox 目前（2024 年中）仍需手动开启 layout.css.has-selector.enabled 标志，Safari 则完全不支持 —— 这意味着它现阶段只适合渐进增强，不能作为核心布局逻辑。
常见错误现象：div:has(.error) { border: 2px solid red; } 在 Safari 里直接被忽略，连降级样式都不会触发；开发者工具里也看不到匹配效果。
- 使用场景：表单校验后高亮整个
fieldset、卡片内有.new-badge时调整标题间距、导航项含.active时改变父容器背景 - 性能影响：浏览器需反向遍历 DOM 树，嵌套过深或频繁更新子元素会拖慢重绘，尤其在移动端
- 不要在
@keyframes或媒体查询条件中使用:has()，目前所有浏览器都不支持
:has() 不支持伪元素和某些伪类组合
你不能写 div:has(::before) 或 a:has(:hover) —— :has() 的参数只能是“可实际匹配到节点的选择器”，而伪元素不生成真实 DOM 节点，:hover 这类动态伪类在选择器计算阶段无法确定状态。
容易踩的坑：有人想用 label:has(input:checked) 控制 label 样式，这没问题；但若改成 label:has(input:focus-visible)，就可能失效，因为焦点状态在样式计算时未必稳定。
立即学习“前端免费学习笔记（深入）”；
- 支持的典型子选择器：
.valid、[data-status="failed"]、img[src*="icon"]、button:disabled - 不支持：
::after、:nth-child(2)（注意：:nth-child本身合法，但若其内部再嵌套:has()就不行）、:is(:hover) - 参数里用
*或:empty要小心 ——div:has(*)匹配所有含任意子节点的div，但div:has(:empty)实际上永远不匹配，因为:empty要求子树完全为空，而:has()自身的存在已破坏“空”条件
用 :has() 替代 JS 监听子状态更轻量，但有边界
以前要让父容器响应子元素 class 变化，得靠 MutationObserver 或反复轮询 classList；现在一行 CSS 就能搞定，比如 .card:has(.loading) { opacity: 0.6; pointer-events: none; }。
为什么这样做：省去 JS 绑定/解绑开销，避免因 JS 执行时机导致的样式闪烁，CSS 引擎原生响应更快。
- 适用条件：子元素状态变化是离散的（如 class 切换、属性增删），不是连续动画帧
- 不适用场景：需要读取子元素尺寸、滚动位置、或执行副作用（如发请求、改 localStorage）
- 兼容性兜底建议：给父元素加一个默认 class（如
.card--js-ready），JS 初始化时移除它，再用.card:not(.card--js-ready):has(.loading)作降级样式，避免纯 CSS 方案失效时完全无反馈
:has() 的选择器权重和层叠规则没变，但容易误判
它的权重就是它所在整个选择器的自然权重。比如 article > header:has(+ .content) 和 header.error 比较时，前者权重更高（含组合符和伪类），但如果你只写 header:has(.error)，它和 header.error 权重其实相等 —— 后声明的会覆盖前者。
容易踩的坑：在 CSS-in-JS 或模块化方案里，:has() 选择器可能被自动加了哈希后缀，导致和你手写的降级 class 不匹配；或者在 Tailwind 等原子类体系中，试图用 group-has-[.error]:border-red-500 却忘了开启插件并配置 group 的作用域。
- 调试技巧：在 DevTools 里选中父元素，看 Styles 面板是否显示
:has(...)规则被划掉（invalid）还是灰掉（unmatched） - 不要嵌套太深：
section:has(div:has(p:has(span.error)))不仅难维护，部分浏览器解析会失败或性能骤降 - 注意空格：
ul:has(li.active)（子元素）和ul:has(li .active)（后代）语义完全不同，后者可能意外命中深层嵌套
