:nth-child(3n+1)选错“第一列”是因为它按DOM顺序计数，不考虑视觉布局；混入非item元素、响应式变化或隐藏节点都会导致失效。
为什么:nth-child(3n+1)在Grid里经常选错“第一列”
它只数 DOM 顺序里的第 1、4、7… 个子元素，完全不管视觉上是否对齐到第一列。只要父容器里混着 <header></header>、注释节点、display: none 元素，或者响应式下 grid-template-columns 从 repeat(3, 1fr) 变成 repeat(2, 1fr)，:nth-child(3n+1) 就立刻失效——选中的可能是第二列中间那个项。
真正决定“每行起始”的是 grid-column-start 和 grid-row，不是选择器本身。写 .item:nth-child(3n+1) { grid-column-start: 1; } 是冗余的，默认填充就是从第 1 列开始。
-
:nth-child()的计数对象是父元素所有直接子节点（含文本、注释、不同标签），不是“可见 Grid 项” - 它和
grid-auto-flow没有绑定关系，无法感知自动布局的行/列断裂点 - 想让第 2、5、8… 项强制换行？
:nth-child(3n+2)只能帮你打标记，起作用的是grid-row: 2或grid-row: span 2
用:nth-child配合grid-column实现交错图文布局
比如左图右文 / 右图左文轮换，且每项高度不一。这时候靠序号轮换比靠 JS 更轻量，但必须避开 DOM 干扰。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
.container { display: grid; grid-template-columns: 1fr 1fr; }
.item:nth-child(odd) { grid-column: 1; }
.item:nth-child(even) { grid-column: 2; }注意：grid-column 比 grid-area 更轻量，无需提前定义 grid-template-areas；如果某项需要跨行显示，直接加 grid-row: span 2 即可。
- 若父容器中混有非
.item元素（如<section></section>、<h2></h2>），改用:nth-of-type(odd)更稳 - Safari 旧版本对
grid-row: span+:nth-child组合存在微小渲染偏移，可加transform: translateZ(0)触发硬件加速 - 不要写
.item:nth-child(1), .item:nth-child(2)这种重复选择器，用:nth-child(-n+2)更简洁
如何用:nth-child(-n+3)精准控制“前N项”样式
:nth-child(-n+3) 是唯一能可靠选中前 3 个子元素的写法，它等价于匹配第 1、2、3 个（代入 n = 0 → 3，n = 1 → 2，n = 2 → 1，n = 3 → 0 无效）。
常见错误是写 :nth-child(1,2,3) —— 这语法根本不存在；或用 :nth-child(n+3)，结果是“从第 3 个开始往后全选”。
-
n是生成器变量，只取 ≥ 0 的整数，不能手动指定某个值 -
A必须是非零整数（步长），B可正可负可零（偏移），但最终结果必须 ≥ 1 才有效 - 当 DOM 结构不干净时（比如动态插入占位符），
:nth-of-type(-n+3)比:nth-child(-n+3)更可靠
6列基础网格 + :nth-child 动态分配列跨度的实战模式
要实现「3列 → 2列 → 3列 → 2列」这类非均匀但规律可循的排布，别用 grid-template-rows 分组，也别用容器包裹子项——那样破坏无限添加能力。
正确做法是：设 grid-template-columns: repeat(6, 1fr)，再用 :nth-child 精确控制每个项的 grid-column 跨度：
.item:nth-child(6n+1),
.item:nth-child(6n+2),
.item:nth-child(6n+3) { grid-column: span 2; } /* 每组前3项各占2列，共6列 */
.item:nth-child(6n+4),
.item:nth-child(6n+5) { grid-column: span 3; } /* 后2项各占3列，撑满一行 */这种写法把“组逻辑”压进选择器，不依赖 JS，也不污染 HTML 结构。
- 所有
span值必须落在总列数范围内，否则会溢出或触发隐式轨道创建 - 如果某项需全宽 banner 效果，用
grid-column: 1 / -1，比span 6更健壮 - 别指望
:nth-child()能“重置”序号——类名、属性、状态都不影响它的计数
实际项目中最容易被忽略的，是 DOM 结构的“洁净度”。哪怕只是多了一个空格文本节点，:nth-child(2) 就可能指向一个看不见的 Text 节点，而不是你预期的 <div>。调试时优先检查开发者工具里的实际子节点列表，而不是只看渲染结果。</div>
