:has() 无法计算子元素数量，但能可靠检测是否存在第 N 个子元素，配合 :nth-child(N) 实现“≥N 个时触发样式”；正确写法为 parent:has(:nth-child(4))，须带空格。
用 :has() 检测子元素个数并切换 grid-template-columns
直接说结论：:has() 本身不能计算数量（比如“大于3个”），但能可靠检测**是否存在第 N 个子元素**，配合 :nth-child(N) 可以实现“≥N 个时触发样式”。这是目前最实用的纯 CSS 动态列数方案。
常见错误是写 parent:has(*:nth-child(4)) 却没加空格——这会匹配自身是第 4 个子元素的 parent，而非 parent 下存在第 4 个子元素。正确写法必须带空格：parent:has(:nth-child(4))。
示例：3 列起始，≥4 个子项时切为 4 列：
ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
ul:has(:nth-child(4)) {
grid-template-columns: repeat(4, 1fr);
}
为什么不能用 :has(:nth-last-child(N)) 做“精确数量判断”
想实现“刚好 5 个子元素时用 5 列”，容易想到 :has(:nth-last-child(1):nth-child(5))。但实际无效——因为 :nth-last-child(1) 和 :nth-child(5) 是对**同一个元素**的双重约束，而该元素必须同时满足“是倒数第 1 个”且“是正数第 5 个”，即总数量必须恰好为 5。看似合理，但多数浏览器（包括 Chrome 120+）对这种组合支持不稳定，Safari 目前完全不支持该写法。
更现实的做法是分层兜底：
-
container:has(:nth-child(6))→ ≥6 个 → 6 列 -
container:has(:nth-child(5)):not(:has(:nth-child(6)))→ 恰好 5 个 → 5 列（注意否定优先级，:not()必须后置） - 但 Safari 不支持
:not(:has(...))，所以生产环境建议只用“≥N”逻辑，避免精确匹配
响应式 + :has() 的嵌套陷阱
如果同时用媒体查询和 :has()，顺序很重要。CSS 是从上到下解析的，后面规则会覆盖前面的同属性声明。别这么写：
@media (min-width: 768px) {
.grid:has(:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
}
.grid { grid-template-columns: repeat(2, 1fr); }
这样在小屏下，.grid 的 2 列会被媒体查询里未命中 :has() 的规则“漏掉”，最终 fallback 成浏览器默认（可能单列）。正确做法是把基础样式放最前，:has() 规则紧随其后，媒体查询包裹二者：
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid:has(:nth-child(4)) {
grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(3, 1fr); }
.grid:has(:nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
}
性能与兼容性必须盯住的两个点
:has() 是高成本选择器，浏览器需回溯子树。当父容器内有上百个子元素、或频繁 DOM 变动（如 JS 动态增删）时，可能引发 layout thrashing。别在 scroll 或 input 事件中依赖它做实时布局切换。
兼容性方面：:has() 在 Chrome 105+、Edge 105+、Firefox 121+、Safari 15.4+ 支持。但 Safari 15.4–16.3 对 :has() 内使用伪类（如 :nth-child）有 bug，推荐至少锁定 Safari 16.4+。可以用 @supports selector(:has(*)) 做渐进增强，fallback 到 JS 计数或固定列数。
真正难处理的是“子元素高度差异大 + 列数动态变化”场景——grid 自动重排可能造成视觉跳动，这时候得配合 grid-auto-flow: dense 或改用 flex + flex-wrap 配合 JS 微调，纯 CSS 已经到边界了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
