:nth-child(an+b) 按dom同级子元素的1-based序号匹配，与css布局无关；n为非负整数，结果必须≥1才有效；js模拟需转换0-based索引，且须验证序号≥b。
它不是“实现布局”，而是按数学序列匹配元素位置；能看起来“复杂”，是因为你把列数、偏移、起始点混在一起推了，但公式本身只管计数，不管渲染。
nth-child(3n+4) 为什么不是从第 4 列开始占满整行？
因为 :nth-child(3n+4) 匹配的是父元素下第 4、7、10、13… 个子元素，和 CSS Grid 的列数完全无关。如果你的 grid-template-columns 是 repeat(3, 1fr)，那第 4 个子项确实落在第二行第一列——但这个“位置”是渲染引擎算出来的，不是选择器决定的。
- 公式只看 DOM 树中同级子元素的顺序编号（1-based），不识别 display: grid / flex 等布局上下文
- 如果中间插了一个
<div class="spacer"></div>，它也会被计入计数，导致原本想选的第 4 项变成第 5 个匹配目标 - 想让“每行最后一项”统一加样式？别硬套
3n+3，先确认是否真有连续 3 个子项——否则用:nth-of-type或加 class 更稳
为什么 n=0 时 3n+1 得到的是第 1 个，而不是第 0 个？
CSS 规范明确定义：子元素索引从 1 开始，n 是非负整数（0, 1, 2…），所以 an+b 的结果必须 ≥ 1 才有效。当 b ≤ 0 时（比如 3n−1），n=0 得 −1，无效；n=1 得 2，才真正开始匹配第 2 个元素。
-
2n+0等价于2n，匹配第 2、4、6… 项（不是第 0 项） -
n+5就是“从第 5 个起所有”，因为 n=0 → 5，n=1 → 6，以此类推 -
−n+5是倒着数前 5 个：n=0→5，n=1→4，n=2→3…n=4→1；n=5 得 0，停止
在 JavaScript 里模拟 nth-child 逻辑容易错在哪？
很多人用 index % a === b 直接翻译，但这是典型错误——CSS 是 1-based，JS 数组是 0-based，且 b 不是余数，是绝对偏移。
- 正确对应关系：
element.matches(':nth-child('+a+'n+'+b+')')等价于(index + 1) === a * n + b（其中 index 是 JS 的 0-based 索引） - 要判断某个 index 是否命中，得解方程：
(index + 1 − b) % a === 0 && index + 1 >= b - 例如
:nth-child(4n+5)：index = 4 → 4+1=5，5−5=0，0%4===0 ✅；index = 3 → 4−5=−1，不满足 ≥5，跳过
真正难的从来不是写对公式，而是看清 DOM 结构里到底有多少同级节点——夹杂注释、文本节点、隐藏元素，都会让“你以为的第 4 个”根本没被选中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
