子元素数量不同，:has() 怎么写才生效
Chrome 105+、Safari 15.4+、Firefox 119+ 才真正支持 :has() 的完整能力，尤其对兄弟/父级条件判断。早期版本（比如 Chrome 100–104）只支持 :has(+) 或 :has(~) 这类简单兄弟选择器，:has(> *) 或 :has(> :nth-child(3)) 会静默失败——不是报错，是压根不匹配。
真正能靠数量做布局分支的写法必须满足两个前提：父容器有明确闭合标签（不能是 <div> 包着一堆文本节点），且子项是同级块级元素（<code><div>、<code><section></section> 等）。:has() 不匹配文本节点、注释或空格占位。
-
:has(> :nth-child(3):nth-last-child(3))—— 精准匹配恰好 3 个子项（注意顺序：同时满足第 3 个 *且* 倒数第 3 个） -
:has(> :nth-child(4))—— 至少 4 个（只要第 4 个存在就触发） -
:has(> :first-child:last-child)—— 恰好 1 个（第一个同时也是最后一个）
CSS Grid 中用 :has() 动态切列数，为什么加了没反应
常见错误是把 :has() 放在 grid 容器内部写，比如 .grid:has(> div:nth-child(2)) { grid-template-columns: repeat(2, 1fr); } —— 这样写无效，因为 :has() 必须作用于父容器本身，且样式必须定义在父容器上，不能靠后代选择器“穿透”进去改自身属性。
正确姿势是让父容器根据子项数量直接切换自己的 grid-template-columns：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
gap: 1rem;
}
.container:has(> *:nth-child(1):nth-last-child(1)) {
grid-template-columns: 1fr;
}
.container:has(> *:nth-child(2):nth-last-child(2)) {
grid-template-columns: repeat(2, 1fr);
}
.container:has(> *:nth-child(3)) {
grid-template-columns: repeat(3, 1fr);
}注意：:nth-child(n):nth-last-child(n) 是“恰好 n 个”的可靠写法；而 :nth-child(n) 单独用只是“至少 n 个”，别混用。
:has() 在 Flex 布局里控制 flex-wrap 和 justify-content
Flex 容器本身不支持基于子项数量自动换行或居中策略，但 :has() 可以补上这一环。关键是避免和 flex-wrap: wrap 冲突——比如你希望“2 个子项左对齐，3 个以上居中”，就不能先设 justify-content: center 再覆盖，得从默认值出发。
- 默认
justify-content: flex-start，用:has(> *:nth-child(3))触发居中 - 想让 1 个子项撑满、2 个平分、3+ 个换行堆叠？
flex-direction: column+:has(> *:nth-child(3))切回row并设flex-wrap: wrap - Firefox 119+ 才支持
:has()与flex-wrap联动，旧版 Safari 会忽略整条规则
兼容性兜底和性能隐患
:has() 是 CSS 中少数会引发重排计算的选择器——浏览器必须遍历所有子节点才能判断是否匹配，子项超 50 个时，滚动或动画中可能卡顿。生产环境务必限制使用范围，别套在 body 或无限滚动容器上。
没有 JS 就要兼容老浏览器？别硬扛。用 class 手动标记数量（如 data-count="3"）仍是更稳的方案；:has() 更适合渐进增强场景：现代浏览器用它减少 JS 绑定，老浏览器降级为固定布局。
最易被忽略的一点：伪类里的 > 是必需的。写成 :has(*:nth-child(3)) 会匹配任意嵌套层级下的第三个子项，不是你想要的“直接子项数量”。
