:nth-child(even) 选中父容器中位置为偶数的元素,按所有子元素统一编号;若需仅对同类型元素计数,应使用 :nth-of-type(even)。

在 CSS 中,使用 :nth-child(even) 是选中列表中偶数位置元素(即第 2、4、6… 项)最直接有效的方式。它基于元素在其父容器中的**实际位置序号**进行匹配,而不是元素本身的奇偶性或其他属性。
✅ 正确写法与基本用法
假设你有一组 元素,想让偶数项背景变浅:
ul li:nth-child(even) {
background-color: #f5f5f5;
}这会选中 下所有处于第 2、4、6… 位置的 元素(无论内容或类名如何)。
⚠️ 注意::nth-child(even) 看的是“位置”,不是“类型”
如果列表中混有其他元素(如 立即学习“前端免费学习笔记(深入)”; 此时: 若父容器内有多种子元素,而你只想对 常配合以下写法增强可读性::nth-child() 仍按**所有子元素统一编号**计算。例如:
- 第 1 个 是第 1 个子元素 → 不匹配 even
- 第 2 个 是第 3 个子元素 → 不匹配
- 第 3 个 是第 4 个子元素 → ✅ 匹配 even? 替代方案:当需要“第 N 个同类型元素”时
自身计数(即第 2 个、第 4 个 ),应改用:
:nth-of-type(even) —— 按元素标签名分组计数(仅适用于同标签)? 小技巧:偶数项常用样式组合
li:nth-child(odd) { background: #fff; } li:nth-child(even) { background: #f9f9f9; }
li:nth-child(even) { display: none; }
li:nth-child(even) { text-align: right; }










