:has()需父容器直接使用且浏览器支持有限，正确写法为.container:has(> *:nth-child(n):nth-last-child(n))判断子元素精确数量，并需设置基础样式及兼容回退。
:has() 能根据子元素数量自动调整父容器布局，但不是所有写法都有效——它只在 Chrome 105+、Firefox 119+、Safari 16.4+ 中可靠工作，且必须直接作用于父容器自身，不能“从子项反推父容器”。
为什么 :has() 写了没反应？先查浏览器支持和选择器位置
常见错误是把 :has() 当成后代选择器用，比如：.grid > div:has(+ div) { grid-template-columns: repeat(2, 1fr); }
这行不通：浏览器根本不允许子元素选择器去修改父容器样式。
- ✅ 正确姿势：
:has()必须作为父容器的选择器一部分，例如.grid:has(> *:nth-child(3)) - ⚠️ 旧版 Chrome（100–104）或 Safari 15.3 及更早版本对
:has(> :nth-child(n))静默失败——不报错，也不匹配 - ? 检查是否真有闭合标签包裹子项：
:has()忽略文本节点、注释、空格；混入这些会导致计数偏移
:has(> :nth-child(n):nth-last-child(n)) 才是“恰好 n 个”的写法
单独用 :has(> *:nth-child(3)) 表示“至少有 3 个”，不是“刚好 3 个”。要精准分支（如 1 个全宽、2 个并排、3 个三等分），必须组合两个伪类：
-
.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 个子项
注意顺序不能颠倒：:nth-child(3):nth-last-child(3) 表示“第 3 个同时也是倒数第 3 个”，这才是“总共 3 个”的逻辑基础。
立即学习“前端免费学习笔记（深入）”；
Grid 布局中用 :has() 切列数，别漏掉默认 fallback
如果你希望父容器在不同子项数量下切换列数，得提前定义基础样式，再用 :has() 覆盖：
.container {
display: grid;
gap: 1rem;
grid-template-columns: 1fr; /* 默认：1 列 */
}
.container:has(> *:nth-child(2):nth-last-child(2)) {
grid-template-columns: repeat(2, 1fr);
}
.container:has(> *:nth-child(3):nth-last-child(3)) {
grid-template-columns: repeat(3, 1fr);
}
- ⚠️ 不要省略基础
grid-template-columns；否则无匹配时会退回到浏览器默认（通常是单列但不带 gap） - ?
@supports not selector(:has())必须加：老浏览器直接忽略整条规则，不触发任何 fallback，得手动补兼容方案 - ? Flex 布局里慎用
:has()控制justify-content和flex-wrap：Firefox 119+ 才支持联动，Safari 16.3 及更早会静默丢弃整条规则
子项必须是同级块级元素，否则计数失效
:has() 的数量判断依赖 DOM 结构的“可见子节点”——它只统计同级的元素节点（<div>、<section> 等），跳过文本、注释、空格甚至 <span>（若未设 display: block）。
- ❌ 错误结构：
<div class="container"> <div>A</div> <!-- comment --> <div>B</div> </div>→:has(> *:nth-child(2):nth-last-child(2))不会命中，因注释干扰了索引 - ✅ 安全写法：确保子项是连续、无干扰的块级元素，且用
<div>显式包裹内容，避免模板引擎插入空白文本节点 - ? 调试技巧：打开 DevTools 的 Elements 面板，手动删掉空白文本节点再测试，能快速验证是否是结构问题
真正难的不是写对 :has()，而是让 DOM 结构干净到它能数准——浏览器不会告诉你“我跳过了三个空格”，只会安静地不匹配。
