.parent:has(.child) 有时不生效，因 :has() 是关系选择器，仅判断当前元素是否包含匹配后代，但在 @media、@keyframes 或 CSS-in-JS 动态注入时可能被忽略；JS 动态插入子元素若未触发重排，父元素也不响应；需确保浏览器版本（Chrome 105+ 等）并避免语法误用。
为什么直接写 .parent:has(.child) 有时不生效
因为 :has() 是一个**关系选择器**，它只对「当前元素是否包含匹配的后代/子元素」做判断，但浏览器渲染时会跳过某些不支持该语法的上下文。最常见的是：在 @media 查询、@keyframes 或某些 CSS-in-JS 库的动态注入阶段，:has() 可能被完全忽略；另外，如果目标子元素是通过 JS 动态插入且未触发样式重计算（比如用 innerHTML 批量写入但没触发 layout），父元素也不会响应变化。
实操建议：
- 确保使用 Chrome 105+、Firefox 121+、Safari 15.4+，Edge 同 Chrome 版本；旧版 Safari（如 iOS 15.2）不支持
- 避免在
style标签内混用未声明的自定义属性（如--foo）和:has()，部分构建工具（如 Vite + Lightning CSS）会在压缩阶段剥离未知语法 - 测试时用
document.querySelector('.parent:has(.child)')看能否选中，比仅靠视觉更可靠
:has() 能否匹配兄弟元素或更复杂的条件
可以，但要注意选择器有效性。例如 .item:has(+ .next) 匹配后面紧邻一个 .next 元素的 .item，而 .card:has(> img, > .title) 表示「直接子元素中同时存在 img 和 .title」——注意逗号是「或」逻辑，不是「且」。
常见误区：
立即学习“前端免费学习笔记（深入）”；
-
:has(.a, .b)是「有 .a 或有 .b」，不是「既有 .a 又有 .b」；要实现「且」需写成:has(.a):has(.b) -
:has(~ .sibling)可以匹配后续任意位置的兄弟，但不能反向（即:has(prev ~ .current)无效） - 不能在
:has()内使用伪类嵌套，如:has(:hover)在绝大多数浏览器仍不支持（截至 2024 年中）
替代 :not(:has(...)) 的写法及性能提示
想表达「没有某个子元素的父元素」，直写 .parent:not(:has(.child)) 是合法的，但要注意：这个组合在大量 DOM 节点下可能触发频繁重排，尤其当 .child 频繁增删时。
更稳的实操路径：
- 优先用 JS 控制 class：如
el.classList.toggle('has-child', el.querySelector('.child') !== null)，再用纯 class 选择器 - 若必须用 CSS，把否定逻辑前置：
.parent { /* 默认状态 */ } .parent:has(.child) { /* 覆盖样式 */ }，比:not(:has())更易维护 - 避免在
:has()中写过于宽泛的选择器，如:has(*)或:has([data-*])，这会让浏览器遍历全部后代节点
与 JS 交互时如何避免样式竞争
当 JS 插入子元素后立即读取父元素的 computed style，有可能拿到旧值——因为 :has() 的匹配结果不是同步更新的，它依赖样式计算周期。
关键处理方式：
- 用
getComputedStyle(el).display等属性触发强制样式计算，但慎用，可能引发 layout thrashing - 更推荐监听
MutationObserver，在子节点插入完成后再 setTimeout(fn, 0)，让样式系统完成一轮更新 - 不要依赖
:has()做关键布局判断（比如是否显示滚动条），它不参与盒模型计算，只影响绘制层
真正麻烦的不是语法本身，而是它把原本由 JS 主导的“状态推断”交给了 CSS 引擎——而这个引擎不会告诉你它什么时候算完了。
