:nth-child(3n+1) 未生效是因为它按 DOM 所有子节点计数，含注释、文本节点等干扰项；应改用 :nth-of-type(3n+1) 或添加 data 属性精准控制。
为什么 :nth-child(3n+1) 有时根本没生效
它只认 DOM 中第 1、4、7、10… 个子节点，且那个位置上**必须是你写的标签**。如果父容器里有注释 <!-- banner -->、换行产生的文本节点、或插进来的 <div class="ad">，那原本“第 4 个 <code>li”在 DOM 里可能已是第 6 个子节点——:nth-child(3n+1) 就会跳过它，去匹配第 7 个（如果那儿恰好是 li）。
常见错误现象包括：视觉上第 1 张图有样式，第 4 张没有，第 7 张又有了；或者加了一段文案后，所有样式整体偏移一位。
- 用浏览器开发者工具右键父元素 → “Edit as HTML”，看清真实子节点顺序（别信 Elements 面板折叠后的样子）
- 若结构不可控（如 CMS 输出、用户编辑区），优先改用
:nth-of-type(3n+1)，它只统计同类型兄弟，自动跳过干扰项 - Grid 布局下，
order或grid-template-areas会改变视觉顺序，但:nth-child()仍按原始 DOM 顺序计算，此时必失效
:nth-child(3n+1) 和 :nth-of-type(3n+1) 到底该选谁
区别不在“公式”，而在“数谁”：:nth-child(3n+1) 是从父元素第一个子节点开始，挨个数 1、2、3……遇到第 1、4、7… 个就停，检查是不是目标标签；:nth-of-type(3n+1) 是先筛出所有同类型兄弟（比如全部 li），再给它们单独编号 1、2、3……取第 1、4、7… 个。
- 纯
ul > li结构，两者效果一致，可任选 - 含广告位、说明文字、动态插入区块的列表，一律用
li:nth-of-type(3n+1) - 若目标元素不是直接子级（比如
li被包在<section><li>...</li></section>里），:nth-of-type也会失效，得靠data-index或 JS 标记
想控制 Grid 中每组第一个元素跨列，光写 :nth-child(3n+1) 不够
:nth-child(3n+1) 只负责“选中”，不负责“怎么排”。要让它真正起作用，必须配合 grid-column: span N，且整个容器得是 display: grid 并定义好列轨道。
立即学习“前端免费学习笔记（深入）”；
- 基础网格建议设为
grid-template-columns: repeat(6, 1fr)（3 和 2 的最小公倍数），保证跨列整除 - 若想让每 3 个元素为一组、每组第一个占满整行（span 6），写法是：
li:nth-child(3n+1) { grid-column: span 6; } - 但注意：如果第 1 个位置被一个
<p></p>占了，这个规则就完全不触发——所以实际项目中更稳妥的是给关键项加data-group-start，再用属性选择器li[data-group-start]
调试时最容易忽略的一点：n 从 0 开始代入，但结果必须 ≥ 1
公式 3n+1 不是“每 3 个挑第 1 个”，而是把 n=0,1,2,3… 依次代入，看结果是否为 ≥1 的正整数。n=0 得 1（有效），n=1 得 4（有效），n=2 得 7（有效）；而 3n-1 在 n=0 时得 -1，n=1 时得 2，中间缺了 1，会导致第一个元素永远选不到。
- 要选前 5 个？用
:nth-child(-n+5)，别用:nth-child(5n) - 要选第 4 到第 8 个？必须组合：
:nth-child(n+4):nth-child(-n+8)，少一个都错 - 想排除第 1 个？
:not(:nth-child(1))比写一堆:nth-child(2), :nth-child(3), ...更可靠
实际用的时候，别死磕公式推导。打开开发者工具，手动删掉几个干扰节点，看样式是否立刻恢复——这比查文档更快定位问题根源。
