:nth-child(3n)匹配第3、6、9、12…个子元素，从第1个位置代入公式计算，结果必须为≥1的正整数；它统计父元素下所有同级子元素（含注释、文本节点等），若需按标签类型计数应使用:nth-of-type(3n)。
:nth-child(3n) 是最直接的写法
想让样式每隔三个元素生效一次（比如第 3、6、7？不对，是 3、6、9…），就用 :nth-child(3n)。它不是“跳过前两个再开始”，而是从第 1 个位置开始代入公式：当 n=1 时得 3，n=2 时得 6，n=3 时得 9 —— 所有结果都必须是正整数，且 ≥1。
常见错误是以为 :nth-child(3n) 会匹配第 0 个（n=0 时结果为 0），但 CSS 规范明确排除位置 0，所以放心用。
-
:nth-child(3n)→ 匹配第 3、6、9、12… 个子元素 -
:nth-child(3n+1)→ 匹配第 1、4、7、10… 个（每组第一个） -
:nth-child(3n+2)→ 匹配第 2、5、8、11… 个（每组第二个）
为什么有时候第 3 个没被选中？
因为 :nth-child() 数的是父元素下**所有同级子元素**，不管标签类型。比如父容器里有 <h2></h2>、<p></p>、<div> 混排，<code>p:nth-child(3n) 只有在第 3、6、9… 个位置恰好是 <p></p> 标签时才生效。
如果目标是“第 3 个 <p></p>”，而不是“第 3 个子元素”，就得换 :nth-of-type(3n) —— 它只统计同类型兄弟节点。
典型干扰场景：
- HTML 里插了注释
<!-- -->或文本节点（比如换行空格）：它们也算子元素，会挤占序号 - 用了
v-if或条件渲染导致 DOM 结构动态变化，序号重新计算 - 父容器里有其他非目标标签（如
<span></span>、<svg></svg>）穿插其中
怎么验证当前匹配的是哪些位置？
打开浏览器开发者工具，选中目标元素，在 Styles 面板里看是否命中了你的 :nth-child() 规则；更直接的是临时加一条调试样式：
li:nth-child(3n) {
outline: 2px solid red;
}
然后逐个检查被标红的 <li> 实际在 DOM 中的序号（右键 → “Edit as HTML”，数子节点）。
如果发现序号对不上，大概率是前面混入了不可见节点，或者你真正想选的是类型序号而非位置序号。
需要同时匹配多个不连续位置怎么办？
CSS 不支持 :nth-child(3, 6, 9) 这种写法，括号里不能填逗号分隔的列表。正确做法是用逗号连接多个选择器：
li:nth-child(3), li:nth-child(6), li:nth-child(9) {
font-weight: bold;
}
但这种写法无法扩展——如果列表长度未知或动态增减，就该回归 :nth-child(3n) 公式写法。只有在明确只处理固定少量项（比如只高亮前三个关键项）时，才考虑手动枚举。
注意：每个选择器都要完整写出，不能简写成 li:nth-child(3,6,9)，那会直接失效。
实际用的时候，最容易被忽略的不是公式本身，而是父容器里那些看不见的子节点 —— 它们会让序号悄悄偏移，让你反复怀疑是不是写错了 3n。
