使用:nth-child实现表格条纹效果可提升可读性，通过even和odd设置奇偶行不同背景色，示例代码包含table样式及td、th格式；若含thead，应用tbody tr:nth-child(even)避免影响表头；还可自定义周期，如3n使每三行变色，增强数据分组展示效果。
在CSS初级项目中，给表格添加条纹效果能提升数据的可读性。通过 :nth-child 伪类选择器，可以轻松实现隔行变色的效果。
表格条纹通常是让偶数行和奇数行显示不同背景色。利用 :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;
}
如果表格包含表头（thead），建议仅对 tbody 内的行设置条纹，避免影响标题行样式。
立即学习“前端免费学习笔记（深入）”；
修改选择器如下：
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
这样 thead 中的标题行保持原样，内容行仍具备清晰的条纹区分。
除了默认的奇偶行，还可以用公式 an+b 实现更复杂的模式。例如每3行为一组变色：
tr:nth-child(3n) {
background-color: #e0f7fa;
}
这会让第3、6、9……行使用指定背景色，适合分组展示数据。
基本上就这些。掌握 :nth-child 的基本用法后，表格样式会更清晰美观，也不难维护。
以上就是如何在CSS初级项目中设置表格条纹效果_nth-child伪类控制行颜色的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
788
收藏
取消收藏
