:has() 无法精确计数子元素，仅支持存在性判断；可通过 :has() 与 :not(:has()) 组合分段匹配实现近似自适应布局，但需注意兼容性与降级处理。
为什么直接用 :has() 判断子元素数量行不通
:has() 不支持计数类选择器（比如 :has(> div:nth-child(3)) 无法表达“恰好有3个子元素”），它只能做存在性判断。也就是说，你只能写 :has(> div)（至少1个）、:has(> div:nth-child(2))（至少2个），但没法区分“刚好2个”和“≥2个”。浏览器目前也不支持 :has(:nth-child(n):last-child) 这类组合来推导总数。
用多个 :has() 分层匹配实现近似自适应
虽然不能精确计数，但可以利用“最小充分条件”分段控制：比如把 grid-template-columns 按子元素是否 ≥2、≥3、≥4 来设不同列数，视觉上接近自适应效果。
-
.grid:has(> *:nth-child(4))→ 至少4个子项，设grid-template-columns: repeat(4, 1fr) -
.grid:has(> *:nth-child(3)):not(:has(> *:nth-child(4)))→ 恰好3个（即≥3 且 repeat(3, 1fr) -
.grid:has(> *:nth-child(2)):not(:has(> *:nth-child(3)))→ 恰好2个，设repeat(2, 1fr) - 默认（无
:has()匹配）→ 当作1个，设1fr或auto
注意：:not(:has(...)) 是关键，否则规则会叠加覆盖；顺序必须从多到少写，CSS 优先级才可靠。
实际使用时的兼容性和 fallback 处理
目前 :has() 在 Chrome 105+、Edge 105+、Safari 15.4+ 支持，Firefox 尚未支持（截至 2024 年中）。生产环境必须加降级：
- 先写传统 fallback：比如固定
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))) - 再用
@supports (selector(:has(*)))包裹上面的分层规则 - 避免在
:has()内部写复杂伪类（如:has(> .item:hover)），性能开销大且部分浏览器会静默忽略
示例片段：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)));
}
@supports (selector(:has(*))) {
.grid:has(> *:nth-child(4)) {
grid-template-columns: repeat(4, 1fr);
}
.grid:has(> *:nth-child(3)):not(:has(> *:nth-child(4))) {
grid-template-columns: repeat(3, 1fr);
}
.grid:has(> *:nth-child(2)):not(:has(> *:nth-child(3))) {
grid-template-columns: repeat(2, 1fr);
}
}
比 :has() 更稳的替代思路
如果项目需支持 Firefox 或要求严格数量匹配，别硬套 :has()。更可行的是：
- 服务端或构建时注入 class：比如根据 children.length 输出
grid-cols-1~grid-cols-6类名（Tailwind 用户可直接用） - 用 JS 监听
children.length变化并切换 class（轻量，兼容性无死角） - CSS 自定义属性 + JS 设置：比如
style="--child-count: 3"，再用[style*="child-count: 3"]匹配（注意引号转义问题）
真正需要“动态响应子元素数量”的场景，CSS 本身能力有限；:has() 提供的是存在性钩子，不是计数引擎——这点容易高估，也最容易在线上出样式错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
