最容易被混淆的关键点，其实是 nth-child 选择器的计数机制。很多人以为它仅仅是“选取第几个元素”，但它的真实逻辑是：先根据父元素下所有直接子元素的全局序号进行编号，再检查这个序号位置上的元素类型是否与选择器匹配。如果类型不符，则直接忽略。常见的坑，就出在这里。
nth-child 并非“选取第几个 li”这么简单，它的实际含义是“父元素下第 N 个子元素，且该子元素恰好是指定的标签名”。一旦混淆这个逻辑，样式就会失效。
为什么 nth-child(2) 有时候不生效？
因为 nth-child(N) 会先按照顺序，将父元素的所有直接子元素从 1 开始编号（不考虑元素类型），然后判断第 N 个位置上的元素是否为你指定的类型。如果第 N 个元素是 div，而你写的是 p:nth-child(2)，那么这条规则根本不会匹配任何 p 元素。
- 父元素：
- A B
- C
li:nth-child(1)→ 匹配第一个li（✅，位置 1 是li）li:nth-child(2)→ ❌ 不匹配，位置 2 是span，并非lili:nth-child(3)→ ✅ 匹配第二个li（它在所有子元素中排第 3 位）
nth-child(even) 和 nth-child(odd) 的实际含义
这两个写法等价于 nth-child(2n) 和 nth-child(2n+1)，但底层逻辑仍然是“对所有子元素统一编号后，取偶/奇数位置”。因此：
- 只要父元素下第 2、4、6… 个子元素是目标标签，就会被选中
- 如果中间夹杂着非目标标签（比如
div、span），会导致视觉上“隔行变色”错位 - 若想严格按同类元素进行奇偶变色，应使用
nth-of-type，而非nth-child
公式写法：an+b 中的 n 从 0 开始计算，但结果序号从 1 开始对齐
公式 2n+1 并不代表“第 2n+1 行”，而是将 n=0,1,2,3... 依次代入，算出一系列位置编号，再找到对应序号的子元素。例如：
nth-child(2n+1)→n=0→1,n=1→3,n=2→5, … → 选中第 1、3、5… 个子元素nth-child(-n+3)→n=0→3,n=1→2,n=2→1,n=3→0（无效）→ 实际匹配第 1、2、3 个子元素nth-child(n+4)→n=0→4,n=1→5,n=2→6… → 从第 4 个开始，一直选到末尾
注意：n 仅仅是一个数学变量，并不对应 DOM 索引；计算结果 ≤ 0 或超出子元素总数时，会被自动忽略。
什么情况下应该换用 nth-of-type？
当你真正需要“只针对某类标签，按它们在同类中的出现顺序编号”时，例如表格中只想给第 3 个 td 添加背景色，而前面可能有 th 或 div —— 此时使用 td:nth-of-type(3) 才更可靠。
nth-child：基于全局序号 → 适合栅格布局、固定结构容器（如纯li列表）nth-of-type：基于同类序号 → 适合混合标签场景（例如在文章段落中选中第 2 个p）- 二者语法完全一致，只是计数逻辑不同，切勿混用
最容易被忽视的一点：不存在“第 0 个子元素”，所有计算结果必须 ≥ 1 才会生效；而 n 本身可以为 0 —— 这个边界细节在编写 -n+5 这类倒序公式时容易踩坑。
