:nth-child(3n+1) 选择dom序号为1、4、7…的元素，与视觉排列无关；其生效需满足html线性、列数固定、无隐藏/插入元素等条件，否则易错位；可靠方案是用grid定位而非依赖序号。
nth-child(3n+1) 选的是第1、4、7…个元素，不是每行第一个
很多人以为 :nth-child(3n+1) 能自动识别“网格中每行首项”，其实它只看 DOM 顺序，和 CSS Grid 或 Flex 的视觉排列无关。如果 HTML 是线性列表（比如 <div></div> 连续排列），那第1、4、7个确实可能落在每行开头——但前提是容器用 display: grid 且列数固定为3，且没跨行、没响应式断点干扰。
常见错误现象：:nth-child(3n+1) 加了 margin-left: 0 却没生效，或者样式错位到第2列；根本原因是元素在 DOM 中的序号和视觉位置不一致（比如中间插了标题、广告位、display: none 元素）。
- 使用场景：纯静态、列数恒定、无动态插入/隐藏的网格列表（如后台管理页的图标栅格）
- 参数差异：
3n+1表示从第1个开始，每3个取1次；3n是第3、6、9…个；3n+2是第2、5、8…个 - 兼容性没问题，IE9+ 都支持；但注意 Safari 旧版本对
grid-template-columns和:nth-child组合渲染有微小偏移
真正起作用的是 grid-column-start，不是 nth-child
想让每行第一列统一左对齐、加边框或特殊背景，靠 :nth-child(3n+1) 是碰运气。更可靠的方式是用 Grid 自身的定位能力，配合 grid-column-start 或 grid-column 显式控制。
例如容器设为 display: grid; grid-template-columns: repeat(3, 1fr);，那么所有子项默认按顺序填满，此时第1、4、7…个自然落在第1列——但这是 Grid 布局的结果，不是 :nth-child 的功劳。
- 实操建议：给需要样式的列写
.item:nth-child(3n+1) { grid-column-start: 1; }没意义，因为它们本来就在第1列；真正该做的是.item:first-child, .item:nth-child(3n+1) { border-left: 2px solid #007bff; } - 性能影响：
:nth-child是 CSS 引擎线性扫描，DOM 超过 2000 个子元素时会有轻微卡顿；Grid 定位则由布局引擎统一计算，更高效 - 如果用了
grid-auto-flow: dense或grid-row-start手动指定位置，:nth-child(3n+1)就彻底不可靠了
响应式下 nth-child(3n+1) 会失效的典型情况
当屏幕变窄，你把 grid-template-columns 从 repeat(3, 1fr) 切成 repeat(2, 1fr)，原本每行3列变成每行2列，但 :nth-child(3n+1) 还是选第1、4、7…个——它们现在分布在第1、2、1列，不再对齐。
错误现象：PC 端看着整齐的左侧高亮，在平板上变成“隔一个亮一个再隔两个”，完全混乱。
- 解决思路：用
@container（需启用 container queries）或媒体查询重置选择器，比如@media (max-width: 768px) { .grid .item:nth-child(2n+1) { ... } } - 更稳的做法：放弃依赖序号，改用
grid-column: 1配合类名，比如给每行首项加class="row-start"，再写.row-start { ... } - 不要指望 JS 动态加 class 来“修复”序号——DOM 插入顺序一变，
3n+1就全乱，维护成本远高于直接用 Grid 轨道控制
替代方案：用 grid-area + named lines 更清晰
如果你真需要每行首项有独立样式，又不想被序号绑架，最干净的办法是定义命名轨道线：grid-template-columns: [start] 1fr [mid] 1fr [mid] 1fr [end];，然后让首项显式占满 start / mid 区域，再统一选 [start] 线上的元素。
不过实际项目里，这有点杀鸡用牛刀。多数情况，直接写：.grid > *:nth-child(3n+1) { margin-left: 0; } 是够用的——只要确认 DOM 结构干净、无隐藏项、无 JS 动态增删。
- 容易被忽略的点：空格文本节点也算
:nth-child的“子元素”。如果 HTML 写成<div class="grid">\n <div>A</div>\n <div>B</div>\n</div>，换行符会产生Text节点，导致:nth-child(3n+1)失效 - 验证方法：打开 DevTools → Elements 面板，把鼠标悬停在父容器上，看子节点是否全是
div，中间有没有#text - 修复方式：删空格、用
display: contents包一层（慎用，会影响可访问性）、或改用:nth-of-type(div)（但要求所有子元素都是div）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
