:has()仅判断存在性，不能计数；正确写法需用*:nth-child(n)锚定子元素存在，空格不可省，且须配合:not()和@supports回退以保障兼容性。
:has() 不能计数，只判断存在性；想靠它“自动调整布局”，必须用 :nth-child(n) 锚定临界点，再通过父选择器触发样式变更——写错一个空格或顺序，整个规则就静默失效。
为什么 :has(:nth-child(3)) 不生效？
因为 :nth-child(3) 是在问“当前元素是不是第 3 个子元素”，而你正在选 .container，它不可能是自己的第 3 个子元素。真正要问的是“容器里是否存在第 3 个子元素”。
- 错误写法：
.container:has(:nth-child(3))→ 匹配失败，无任何效果 - 正确写法：
.container:has(*:nth-child(3))→*表示任意子元素，“存在第 3 个”才成立 - 空格不能省：
*:nth-child(3)前必须有空格，否则解析为“.container自身满足*:nth-child(3)”，逻辑崩坏
:has() 怎么写才能精准控制列数？
“恰好 N 个”比“至少 N 个”难得多，浏览器支持差异大，优先用可落地的组合写法：
- ≥3 个子项：
.grid:has(*:nth-child(3)) { grid-template-columns: repeat(3, 1fr); } - 恰好 3 个（Chrome/Firefox 可用）：
.grid:has(*:nth-child(3)):not(:has(*:nth-child(4))) - 恰好 1 个（兼容性最好）：
.grid:has(*:nth-child(1)):not(:has(*:nth-child(2))) - 注意顺序：
:not()必须后置，否则被前面更宽泛的规则覆盖
DOM 结构稍有偏差，:has() 就彻底失灵
它只匹配元素节点，对文本、注释、空格极其敏感——这些都会计入 :nth-child() 计数。
立即学习“前端免费学习笔记（深入）”；
- 这段 HTML 实际有 4 个子节点：
<div class="container"><div>A</div><div>B</div><!-- comment --><div>C</div></div> -
.container:has(*:nth-child(3))匹配的是注释节点，不是第三个<div>，规则不触发 - 更稳妥的替代：
.container:has(.item:nth-of-type(3))（前提是所有目标子元素都是同类型标签） - 服务端渲染或 React/Vue 动态插入时，若初始 DOM 含换行缩进，也会生成 text node，导致计数偏移
生产环境必须加 @supports 回退
Safari 15.3 及更早版本、部分 iOS WebKit 完全忽略 :has() 规则，且不报错——用户看到的就是默认样式，毫无预警。
- 必须包裹：
@supports selector(:has(*)) { .grid:has(*:nth-child(3)) { ... } } - 基础样式不能省：
.grid { grid-template-columns: 1fr; }必须显式定义，否则 fallback 会退到浏览器默认行为（可能无 gap、单列堆叠） - 别依赖
:has()做关键交互逻辑（如折叠/展开），它无法监听 computed style 或触发重排，Safari 中动态增删子元素后样式常滞后
真正麻烦的不是语法本身，而是你得同时盯着 DOM 结构、浏览器支持表、伪类组合优先级和 fallback 路径——任何一个环节松动，整套逻辑就断在用户屏幕上。
