:nth-child(even)匹配父元素下DOM顺序为偶数(2、4、6…)的子元素,从1开始计数,不区分类型且包含所有同级子元素;等价于:nth-child(2n),注意与:nth-of-type(even)的区别。

在 CSS 中,想只给偶数位置的元素(比如第 2、4、6…个)加样式,最直接的方式就是用 :nth-child(even) 伪类选择器。
什么是 :nth-child(even)?
它会匹配父元素下所有子元素中,处于偶数位置(即索引为 2、4、6…)的元素,**按 DOM 顺序计数,从 1 开始**。注意:不是按 class 或标签筛选后再数,而是对所有子元素统一编号后取偶数位。
例如:
-
li:nth-child(even)→ 给或中第 2、4、6…个加样式 -
div:nth-child(even)→ 给父容器里第 2、4、6…个加样式(前提是它是该位置上的子元素)常见写法和等价形式
:nth-child(even)等价于:立即学习“前端免费学习笔记(深入)”;
-
:nth-child(2n)—— 更灵活,可扩展为2n+1(奇数)、3n(每 3 个选一个)等 -
:nth-child(2n+0)—— 数学上等价,但不常用
推荐优先使用
2n,逻辑更清晰,也方便后续调整周期。要注意的坑
这个选择器容易误用,关键点有三个:
-
必须是同级子元素:如果目标元素中间夹着其他标签(比如
、),计数会把它们一起算进去 - 起始编号是 1,不是 0:所以第 2 个才是第一个“偶数位”,不是第 0 个
-
不区分元素类型:哪怕你写的是
li:nth-child(even),但如果第 2 个子元素其实是,那这条规则不会生效——因为不匹配li实用小技巧
如果想“忽略非目标标签,只对某类元素按偶数序号样式”,可以用
:nth-of-type():-
li:nth-of-type(even)→ 只统计标签,第 2、4、6…个才命中(跳过中间的其他标签) - 适合列表中混有标题、分隔线等非
li元素的场景
简单对比:
HTML 示例:
- A
- B
- C
干扰项
li:nth-child(even)→ 不生效(第 2 个子是,不是li)li:nth-of-type(even)→ 给 B 和 C 中的第 2 个li(即 C)加样式 -
-










