CSS :nth-child选择器公式语法与常用取值详解

最容易被混淆的关键点，其实是 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，并非 li
• li: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 这类倒序公式时容易踩坑。