使用:nth-child实现表格条纹效果可提升可读性，通过even和odd设置奇偶行不同背景色，示例代码包含table样式及td、th格式；若含thead，应用tbody tr:nth-child(even)避免影响表头；还可自定义周期，如3n使每三行变色，增强数据分组展示效果。
在CSS初级项目中，给表格添加条纹效果能提升数据的可读性。通过 :nth-child 伪类选择器，可以轻松实现隔行变色的效果。
使用 :nth-child(even) 和 :nth-child(odd)
表格条纹通常是让偶数行和奇数行显示不同背景色。利用 :nth-child(even) 选中偶数行，:nth-child(odd) 选中奇数行，即可设置交替颜色。
示例代码：
table {
width: 100%;
border-collapse: collapse;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
td, th {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
只对 tbody 中的行应用条纹
如果表格包含表头（thead），建议仅对 tbody 内的行设置条纹，避免影响标题行样式。
立即学习“前端免费学习笔记（深入）”；
修改选择器如下：
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
这样 thead 中的标题行保持原样，内容行仍具备清晰的条纹区分。
自定义条纹周期（如每3行变色）
除了默认的奇偶行，还可以用公式 an+b 实现更复杂的模式。例如每3行为一组变色：
tr:nth-child(3n) {
background-color: #e0f7fa;
}
这会让第3、6、9……行使用指定背景色，适合分组展示数据。
基本上就这些。掌握 :nth-child 的基本用法后，表格样式会更清晰美观，也不难维护。
