使用: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;
}
这样表格的每一行就会呈现交替的浅灰与白色背景，提升可读性。
简化写法：只设置一种样式
通常页面默认背景或容器背景已设定一种颜色，因此只需为偶数行（或奇数行）添加背景即可实现交替效果。
立即学习“前端免费学习笔记（深入）”；
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)，能让页面排版更清晰自然。
