:nth-child(3n+1)只匹配DOM序号为1、4、7…的元素，与视觉网格位置无关；若HTML中存在header、注释、隐藏元素等干扰节点，序号即偏移，导致选错；可靠方案是用grid-column定位或nth-of-type。
nth-child(3n+1) 为什么总选不对“每行第一个”
它根本不是为网格视觉位置设计的，只认 DOM 顺序。哪怕你用 display: grid 和 grid-template-columns: repeat(3, 1fr)，:nth-child(3n+1) 依然匹配第 1、4、7… 个子元素——这些元素在 HTML 里是连续的，但一旦中间插了 <header></header>、注释、<div class="ad"> 或 <code>display: none 元素，序号就全偏了。
- 调试时直接看开发者工具里该元素在父节点下的 child index（右键 → “检查” → 看 Element 面板顶部的序号）
- 如果目标元素前面有非目标标签，改用
:nth-of-type(3n+1)，它只数同类型标签（比如只数<div>） <li>不要依赖它做“首列样式”，除非你能 100% 控制 HTML 结构：纯 <code><div> 连续排列、无注释、无空格文本节点 <h3>grid 布局里想控制“每行第一列”，该用什么</h3> <p>靠 <code>:nth-child(3n+1)是赌运气；真正可靠的是 Grid 自身定位能力。- 给所有子项设
grid-column: 1，再用:nth-child(3n+1)加背景或边框——但注意：这和布局无关，只是叠加样式 - 更干净的做法：
.item:first-child, .item:nth-child(3n+1) { border-left: 2px solid #007bff; }，前提是列数固定且无动态插入 - 响应式下列数会变（比如从 3 列 → 2 列），此时
3n+1就失效了，必须配合媒体查询重写，例如：@media (max-width: 768px) { .item:nth-child(2n+1) { ... } }
公式 an+b 中的 n 到底怎么算
n 是数学变量，从 0 开始代入，结果值 ≤ 0 或超过子元素总数时自动忽略。
-
3n+1→ n=0→1, n=1→4, n=2→7… → 匹配位置 1、4、7… -
-n+3→ n=0→3, n=1→2, n=2→1 → 实际匹配位置 1、2、3 -
n+4→ n=0→4, n=1→5… → 从第 4 个开始，直到末尾 -
2n和even等价，2n+1和odd等价，但底层逻辑一样：统一编号后取偶/奇位
什么时候该放弃 nth-child，换别的方案
当 DOM 不可控、需要响应式适配、或存在跨行/手动定位时，
:nth-child()就不再可靠。立即学习“前端免费学习笔记（深入）”；
- 用了
grid-auto-flow: dense或显式写了grid-row-start？别用:nth-child控制列样式，它和布局引擎不协同 - Flex +
flex-wrap下想“每行第一个加 margin”？:nth-child(3n+1)无法感知换行点，容易错位 - 现代方案可考虑
:has(> :first-child)配合自定义属性标记新行起点，但兼容性有限（Chrome 120+ / Safari 17.4+） - 最稳的还是服务端或 JS 注入 class，比如
class="grid-col-1"，然后直接写.grid-col-1 { ... }
:nth-child()的陷阱不在语法，而在对“位置”的误读——它永远数 DOM 树里的真实序号，不是你眼睛看到的网格位置。 - 给所有子项设
