CSSnth-child奇偶行设置技巧

CSS 的 `:nth-child(even)` 和 `:nth-child(odd)` 伪类是实现表格、列表及任意容器内元素（如 `tr`、`div`、`li` 等）奇偶行交替背景色的简洁高效方案——无需冗余 class、不依赖 JavaScript，仅用几行 CSS 即可显著提升内容可读性与视觉层次感；无论是为表格添加柔和条纹，还是为信息卡片列表营造节奏感，只需设置一种状态（如仅偶数行着色）即可借助默认背景自然呈现交替效果，让网页排版更清晰、专业又省力。

在网页表格或列表中，为了让内容更易读，常会用不同背景色区分奇偶行。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)，能让页面排版更清晰自然。

本篇关于《CSSnth-child奇偶行设置技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！