CSS伪类:nth-child奇偶选择如何实现交替行样式_使用:nth-child(even odd)调整背景

使用: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)

通过 :nth-child(even) 选择偶数行，:nth-child(odd) 选择奇数行，可以为它们分别设置背景颜色。

例如：

tr:nth-child(even) {   background-color: #f2f2f2; } tr:nth-child(odd) {   background-color: #ffffff; }

这样表格的每一行就会呈现交替的浅灰与白色背景，提升可读性。

简化写法：只设置一种样式

通常页面默认背景或容器背景已设定一种颜色，因此只需为偶数行（或奇数行）添加背景即可实现交替效果。

立即学习“前端免费学习笔记（深入）”；

码上飞

码上飞（CodeFlying） 是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

430

查看详情

常用简写：

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)，能让页面排版更清晰自然。