结论：用 :has() 判断子元素数量并配合 grid-template-columns 可行，但需满足浏览器支持（Chrome 105+/Firefox 121+/Safari 16.4+）、父选择器上写 :has()、规则按“从多到少”顺序叠加三个硬条件。
直接说结论：用 :has() 判断子元素数量并配合 grid-template-columns 是可行的，但必须满足三个硬条件：浏览器支持（Chrome 105+ / Firefox 121+ / Safari 16.4+）、父选择器上写 :has()、规则顺序按“从多到少”叠加，否则样式不生效或被覆盖。
为什么 :has(> *:nth-child(4)) 不起作用？
常见错误是把它当成“精确计数”，其实它只表示“存在第 4 个子元素”，即总数 ≥ 4。更隐蔽的问题是：
- 把
:has()写在子元素选择器上（如div > span:has(+ span)），浏览器直接忽略整条规则 - 嵌套在
@media或@supports里（部分旧版 Safari 不支持嵌套中的:has()） - 子元素中混入文本节点、注释或空格——
:has()只匹配元素节点，计数会跳过它们，导致判断失准
:not(:has()) 和多层 :has() 怎么组合才对？
CSS 没有 > 或 < 运算符，只能靠“是否存在第 N 个子”来逼近范围。关键在于书写顺序必须从大到小，否则低优先级规则会覆盖高优先级的：
比如实现「1–3 个 → 1 列，4–6 个 → 2 列，7+ 个 → 3 列」，要这样写：
立即学习“前端免费学习笔记（深入）”；
.grid:has(> div:nth-child(7)) { grid-template-columns: repeat(3, 1fr); }
.grid:has(> div:nth-child(4)):not(:has(> div:nth-child(7))) { grid-template-columns: repeat(2, 1fr); }
.grid:not(:has(> div:nth-child(4))) { grid-template-columns: 1fr; }
注意：:not(:has(...)) 必须放在最后，且不能省略中间的否定条件——漏掉 :not(:has(> div:nth-child(7)))，4–6 个和 7+ 个都会命中第一条规则。
想精准匹配“恰好 n 个子元素”怎么办？
用 :has(> *:nth-child(n):nth-last-child(n))。例如：
-
.container:has(> *:nth-child(1):nth-last-child(1))→ 恰好 1 个 -
.container:has(> *:nth-child(2):nth-last-child(2))→ 恰好 2 个
这个写法要求所有子项是同级块级元素（<div>、<section>），且不能有文本节点干扰。如果 DOM 中有换行/空格生成的文本节点，得用 display: contents 或 JavaScript 清理，否则 :nth-last-child() 计数会错位。
真正难的不是写对语法，而是意识到 :has() 的布尔性限制和 DOM 结构敏感性——它不是 JS 的 children.length，而是一次性快照判断。一旦项目需要兼容 Safari 15.x 或旧版 Firefox，就得准备 @supports not selector(:has()) 的 fallback，比如退回到 auto-fit + minmax() 的响应式列数方案。
