当子元素少于4个时强制单列显示，需用:has(> *:nth-child(4))判断存在性，配合not(:has())实现≤3个子项为1fr；阶梯式列数需按≥7、4–6、≤3顺序叠加:has()与:not(:has())规则，注意浏览器兼容性及display: contents兼容问题。
子元素数量少于4个时强制单列显示
当容器内 children 不足4个，用 :has() 配合 grid-template-columns 可避免多余空列。关键在于：伪类必须写在父选择器之后，且不能嵌套在媒体查询里（部分浏览器不支持嵌套中的 :has()）。
常见错误是把 :has() 放在子元素上，比如 div > span:has(+ span + span) —— 这样匹配的是“有连续两个兄弟的 span”，完全偏离目标。正确写法是让父容器自己判断后代数量：
ul:has(> li:nth-child(4)) {
grid-template-columns: repeat(3, 1fr);
}
ul:not(:has(> li:nth-child(4))) {
grid-template-columns: 1fr;
}
注意：nth-child(4) 表示“存在第4个子元素”，即子元素总数 ≥ 4；:not(:has(...)) 才对应“少于4个”。不要误用 nth-last-child(1) 或 count()（CSS 中不存在该函数）。
Grid 列数随子元素数量阶梯式变化
想实现“1–3个子项 → 1列，4–6个 → 2列，7个以上 → 3列”，仅靠 :has() 的布尔判断不够，得叠加多个否定条件。因为 CSS 没有大于/小于比较运算符，只能靠“是否存在第N个子”来间接表达范围。
-
:has(> *:nth-child(7))→ 至少7个（即 ≥7） -
:has(> *:nth-child(4)):not(:has(> *:nth-child(7)))→ ≥4 且 -
:not(:has(> *:nth-child(4)))→
实际应用中需按从多到少顺序书写规则，否则低优先级的会覆盖高优先级的（CSS 层叠逻辑）。例如：
.grid-container:has(> div:nth-child(7)) {
grid-template-columns: repeat(3, 1fr);
}
.grid-container:has(> div:nth-child(4)):not(:has(> div:nth-child(7))) {
grid-template-columns: repeat(2, 1fr);
}
.grid-container:not(:has(> div:nth-child(4))) {
grid-template-columns: 1fr;
}
兼容性与 fallback 方案
:has() 在 Chrome 105+、Firefox 121+、Safari 15.4+ 支持，但旧版 Safari（如 iOS 15.1）和所有 IE 完全不支持。若项目需兼容，不能只依赖 :has() 动态控制列数。
推荐 fallback 策略：
- 先写基础 Grid 布局（如
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))），保证内容始终可读 - 再用
@supports (selector(:has(*)))包裹动态列数规则，仅在支持环境覆盖基础布局 - 服务端或 JS 注入 class（如
child-count-2）仍是更可控的方式，尤其当子元素由 JS 动态增删时 ——:has()不响应 DOM 变更后的重计算（Chrome 115+ 已修复，但 Safari 仍存延迟）
为什么不用 JavaScript 监听子节点变化？
看起来用 MutationObserver 监听 childList 更直观，但实际中容易触发过度重排：每次增删子元素都触发 layout，尤其在滚动中频繁操作时性能明显下降。而 CSS :has() 是声明式、惰性求值的，浏览器只在样式计算阶段批量处理，无额外运行时开销。
不过要注意一个隐藏坑：:has() 的选择器不能包含伪元素（如 :before）、不能跨 Shadow DOM，且对 display: contents 子元素的计数行为各浏览器不一致（Chrome 计入，Firefox 忽略）。如果子元素用了 display: contents，建议统一改用 visibility: hidden 或移除该声明。
真正复杂的数量逻辑（比如“排除某类子元素后计数”“按 class 分组统计”），还是得回到 JS；纯 CSS 的 :has() 只适合基于 DOM 结构层级的简单存在性判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
