使用:nth-child(even)和:nth-child(odd)可为表格或列表奇偶行设置不同背景色，如tr:nth-child(even){background-color:#f9f9f9}仅需为偶数行设色即可形成条纹效果，.item-list div:nth-child(odd){background:#eef5f9;padding:10px}该方法同样适用于div、ul、ol等元素，提升内容可读性与层次感。
在网页表格或列表中，为了让内容更易读，常会用不同背景色区分奇偶行。CSS 的 :nth-child 伪类能轻松实现这一效果，无需额外的 class 标记。
通过 :nth-child(even) 选择偶数行，:nth-child(odd) 选择奇数行，可以为它们分别设置背景颜色。
例如：
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
这样表格的每一行就会呈现交替的浅灰与白色背景，提升可读性。
通常页面默认背景或容器背景已设定一种颜色，因此只需为偶数行（或奇数行）添加背景即可实现交替效果。
立即学习“前端免费学习笔记（深入）”；
常用简写：
tr:nth-child(even) {
background-color: #f9f9f9;
}
此时奇数行沿用默认背景，偶数行变色，视觉上依然形成条纹效果。
不只是表格，:nth-child 同样适用于 ul、ol 或一组 div 块元素。
示例：
.item-list div:nth-child(odd) {
background: #eef5f9;
padding: 10px;
}
这样在展示信息卡片或文章列表时，也能让内容更有层次。
基本上就这些，合理使用 :nth-child(even) 和 (odd)，能让页面排版更清晰自然。
以上就是CSS伪类:nth-child奇偶选择如何实现交替行样式_使用:nth-child(even odd)调整背景的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
995
