HTML中CSS的:nth-child选择器公式语法与常用取值教程

nth-child匹配父元素下第N个子元素且类型一致，非仅同类元素序号；nth-of-type才按同类元素单独编号。例如ul中span夹在li之间时，li:nth-child(2)不匹配因位置2是span。

nth-child 不是“选第几个 li”那么简单，它选的是“父元素下第 N 个子元素，且这个子元素恰好是你写的标签名”。搞错这点，样式就失效。

为什么 nth-child(2) 有时不生效？

因为 nth-child(N) 先按顺序给父元素的所有直接子元素从 1 开始编号（不管类型），再看第 N 个是不是你指定的元素类型。如果第 N 个是 div，而你写的是 p:nth-child(2)，那这条规则根本不会匹配任何 p。

• 父元素：<ul><li>A</li><span>B</span><li>C</li></ul>
• 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 这类倒序公式时踩空。