:nth-child(even) 选中父容器中位置为偶数的元素，按所有子元素统一编号；若需仅对同类型元素计数，应使用 :nth-of-type(even)。
在 CSS 中，使用 :nth-child(even) 是选中列表中偶数位置元素（即第 2、4、6… 项）最直接有效的方式。它基于元素在其父容器中的**实际位置序号**进行匹配，而不是元素本身的奇偶性或其他属性。
假设你有一组 <li> 元素，想让偶数项背景变浅：
ul li:nth-child(even) {
background-color: #f5f5f5;
}这会选中 <ul></ul> 下所有处于第 2、4、6… 位置的 <li> 元素（无论内容或类名如何）。
如果列表中混有其他元素（如 <div> 或注释节点），<code>:nth-child() 仍按**所有子元素统一编号**计算。例如：
立即学习“前端免费学习笔记（深入）”；
<ul> <li>第一项</li> <div>干扰项</div> <li>第二项</li> <li>第三项</li> </ul>
此时：
- 第 1 个 <li> 是第 1 个子元素 → 不匹配 even
- 第 2 个 <li> 是第 3 个子元素 → 不匹配
- 第 3 个 <li> 是第 4 个子元素 → ✅ 匹配 even
若父容器内有多种子元素，而你只想对 <li> 自身计数（即第 2 个、第 4 个 <li>），应改用：
:nth-of-type(even) —— 按元素标签名分组计数（仅适用于同标签）
<li>或 JavaScript 动态添加 class（更灵活，适合复杂逻辑）
常配合以下写法增强可读性：
li:nth-child(odd) { background: #fff; } li:nth-child(even) { background: #f9f9f9; }
<li>隐藏偶数项：li:nth-child(even) { display: none; }
<li>偶数项右对齐：li:nth-child(even) { text-align: right; }
以上就是css如何只选中偶数项列表元素_利用:nth-child(even)实现偶数匹配的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
900
收藏
