:has()在旧版浏览器（如iOS 15.3及更早Safari）中完全不解析，需用CSS.supports('selector(:has(*))')检测支持性，不支持时须降级为JS方案。
为什么:has()有时完全不生效
浏览器根本不解析该规则，是最常见的“静默失败”。Chrome 105+、Firefox 119+、Safari 15.4+ 才原生支持，旧版 Safari（尤其是 iOS 15.3 及更早）和多数 Electron 内核会直接忽略整条 CSS 规则——DevTools 的 Styles 面板里根本看不到它。
验证是否支持的最简方式：CSS.supports('selector(:has(*))') 返回 true 才能用。不支持时，必须降级为 JS 方案，比如监听 input 的 change 事件后给父元素加 data-checked 类。
-
label:has(input:checked)在<label><input type="checkbox"></label>结构下才有效；若用for/id分离写法，:has()无法跨关联匹配 -
:has()不穿透 Shadow DOM 边界，shadowRoot内部的子元素状态不会触发 light DOM 中父元素的样式变化 - 写了
.form:has([data-valid=true])却无效？属性值没加引号，应写成[data-valid="true"]
:has()里能写哪些子选择器才安全
不是所有伪类都能塞进括号里。:checked、:valid、:invalid、[open] 和真实存在的 class 或属性是当前最稳妥的组合；:hover 和 :focus 在部分 Safari 版本中响应不稳定，:focus-within 嵌套使用时兼容性更差。
- ✅ 安全：
article:has(.comment:empty)、form:has(input:invalid)、details:has([open]) - ❌ 无效或不可靠：
div:has(::before)（伪元素非法）、section:has(div:hover)（非交互元素 hover 检测弱）、nav:has(a:focus)（焦点状态计算时机难保证） -
button:has(> .spinner)中的>表示直接子元素，而button:has(.spinner)匹配任意后代，两者语义不同，别混用
父元素样式被覆盖，:has()规则却不起作用
不是 :has() 失效，而是层叠优先级或 !important 干扰了结果。例如 .card { height: auto !important; } 会挡住 .card:has(.loading) { height: 100px; }，因为 !important 权重更高。
立即学习“前端免费学习笔记（深入）”；
- 检查 DevTools 中该规则是否出现在 Styles 面板——没出现=浏览器不支持；出现了但被划掉=被更高权重规则覆盖
-
:has()规则的特异性（specificity）和普通选择器一致，label:has(input:checked)和label是同一级权重，靠书写顺序决定胜负 - 用了
data-属性但 JS 只改了dataset，没调用el.setAttribute('data-status', 'done')——:has()只读 DOM attribute，不读 JS property
深层嵌套或高频更新时性能明显变慢
:has() 是关系型选择器，浏览器需对每个候选父元素遍历其全部后代来判断条件。DOM 节点多、嵌套深（>3 层）、或子元素状态频繁切换（如轮播图 class 切换），都会显著拖慢渲染。
- 避免在
body或html上直接写body:has(.error)，极易引发全页面重排 - 慎用于滚动区域、动画帧内或大量卡片列表；优先用更窄的父选择器，比如
.form-group:has(input:invalid)而非form:has(input:invalid) - 动态插入内容（
innerHTML或appendChild）能即时触发:has()，但若父元素本身是 JS 创建后尚未插入 DOM，规则不会预加载生效
:has() 可能来不及响应。这种边界情况没法靠 CSS 解决，得靠 JS 加一层防抖或强制重排兜底。 
