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