nth-child(3n+1)匹配同级子元素中位置序号为1、4、7、10…的元素，按DOM顺序从1开始编号，包含注释、文本等所有节点，不受标签类型或布局模式（如Grid/Flex）影响。
nth-child(3n+1) 到底匹配哪些元素
它不是“每3个选第1个”，而是“位置序号满足 3n+1 的元素”——也就是位置为 1、4、7、10… 的元素。关键在“位置”，不是“序号从0开始计数”，更不是“每组第一个”。常见错误是把容器里带 span 或其他非目标标签的子元素也纳入计算，结果发现明明写了 div:nth-child(3n+1) 却没生效，其实是前面有个 header 或注释节点占了位置1。
- 公式中
n从 0 开始代入：n=0 → 1，n=1 → 4，n=2 → 7… - 只对**同级子元素**生效，且按 DOM 顺序逐个编号，不管类型是否匹配选择器
- 如果父容器开头有
comment节点（比如 Vue/JSX 注释）、text节点（空格换行），它们也会被计入序号
为什么 nth-child(3n+1) 在 Grid 布局里常失效
CSS Grid 本身不改变 DOM 结构，但开发者常误以为“网格项”是独立单元；实际上 nth-child 仍作用于父容器的直接子元素。如果你用 display: grid + grid-template-columns: repeat(3, 1fr)，视觉上每行3个，但 nth-child(3n+1) 依然按整个列表顺序选 1、4、7…，而非“每行第一个”。
- 想实现“每行第一个加边距”，不能靠
nth-child(3n+1)，得用grid-column: 1配合:nth-of-type或 JS 标记 - 若子元素类型混杂（如
div、article、section），nth-child仍按位置算，nth-of-type才按标签类型分组再算 - Flex/Grid 容器内，伪类匹配不受布局模式影响，只看 DOM 层级和顺序
替代方案：什么时候该换用 nth-of-type 或 CSS 容器查询
nth-of-type 能避开无关兄弟节点干扰，适合模板中穿插标题、分隔线等场景；而真正需要“响应式间隔控制”的复杂网格，纯 CSS 已经力不从心，得结合逻辑判断。
- 用
article:nth-of-type(3n+1)可跳过中间的header或aside元素 - CSS 容器查询（
@container）目前无法驱动nth-child动态重算，别指望它让公式随宽度变化 - 真要“在 2 列时选每行首项，3 列时选每行末项”，只能用 JS 计算当前列数后加 class，或改用
grid-column-start显式控制
调试 nth-child 公式的实际技巧
别猜，直接看浏览器开发者工具里每个子元素的“Computed”面板下 nth-child 是否命中——它会标出当前元素在父容器中的位置序号。很多人卡在“写对了却没效果”，其实只是父容器里多了个看不见的 text 节点。
立即学习“前端免费学习笔记（深入）”；
- 在父容器上临时加
outline: 1px solid red，再逐个 hover 子元素看序号提示 - 用
console.log(Array.from(parent.children).map((el, i) => [i+1, el.tagName]))快速确认真实子元素顺序和类型 - 避免在生产环境依赖
nth-child做关键样式（比如栅格间距），优先用gap+padding组合控制
nth-child 公式本身很确定，但 DOM 结构的不可控性才是最大变量。真正难的不是算 3n+1，而是确保你写的那个“1”确实是你要的那个“第一个”。 
