:has()无反应因浏览器版本过低或选择器位置错误；必须用于父容器自身且需Chrome 105+/Firefox 119+/Safari 16.4+支持；精准判断子项数量须用:nth-child(n):nth-last-child(n)组合，且子项需为同级块级元素。
为什么:has()写完没反应？先看浏览器支持和选择器位置
Chrome 105+、Firefox 119+、Safari 16.4+ 才真正支持:has(> :nth-child(n))这类嵌套子项数量判断；早期版本（如 Chrome 100–104）对:has(> *)或:has(> :nth-child(3))会静默失败——不报错，也不匹配。更关键的是：:has()必须直接作用于父容器本身，且样式规则必须定义在该父容器上。比如你想让.grid根据子项数量切列数，下面这种写法完全无效：
.grid > div:has(+ div) { grid-template-columns: repeat(2, 1fr); }
它试图“从子项出发改父容器”，浏览器根本不允许。正确姿势是把:has()放在.grid选择器里，直接控制.grid自己的属性：
.grid:has(> *:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
:has(> :nth-child(n):nth-last-child(n))才是“恰好 n 个”的可靠写法
单独用:has(> *:nth-child(3))只表示“至少有 3 个子项”，不是“刚好 3 个”。如果你需要精准分支（比如 1 个子项全宽、2 个并排、3 个三等分），必须组合: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 个 -
.container:has(> *:nth-child(3):nth-last-child(3))→ 恰好 3 个
注意：这个写法要求子项是同级块级元素（ Flex 容器默认 另外，Firefox 119+ 才支持），不能混入文本节点、注释或空格——否则:has()会跳过它们，导致计数错位。Flex 布局里用
:has()控制justify-content要避开flex-wrap冲突justify-content: flex-start，你不能先设justify-content: center再靠:has()覆盖为flex-start，因为层叠优先级会导致行为不可控。更稳妥的做法是从默认值出发，只用:has()添加“例外”：
.flex:has(> *:nth-child(3)) { justify-content: center; } → 3+ 个子项才居中.flex:has(> *:nth-child(1):nth-last-child(1)) { justify-content: stretch; } → 单个子项撑满:has()与flex-wrap联动；旧版 Safari 会直接忽略整条规则，不触发任何 fallback。如果需兼容，得准备@supports not selector(:has(...))兜底。别把
:has()当万能解药：它不解决内容高度不一致问题:has()只能响应子项“数量”，对子项内部高度、文字行数、图片尺寸完全无感。比如你用:has(> *:nth-child(2))切两列 Grid，但其中一项是长文、另一项只有图标，结果就是两列高度严重不对齐。这时候:has()帮不上忙，得靠grid-auto-rows: minmax(200px, auto)或align-items: start来约束行高和对齐方式。真正的难点从来不在“怎么切列数”，而在“切完之后，内容怎么稳住不塌陷”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
