使用:nth-child伪类可轻松实现表格隔行变色，通过tr:nth-child(even)和tr:nth-child(odd)分别为偶数行和奇数行设置不同背景色，若存在表头则用tbody tr限定范围，也可仅设置偶数行颜色以简化代码，配合border-collapse:collapse优化边框显示效果。
要设置CSS表格隔行背景颜色，最简单的方法是使用 :nth-child 伪类选择器。通过它可以选择奇数行或偶数行，并为它们分别设置不同的背景色，从而实现隔行变色的效果。
1. 使用 :nth-child(even) 和 :nth-child(odd)
这种方法适用于表格中的 tr 元素，可以分别为偶数行和奇数行设置背景颜色。示例代码：
table {
width: 100%;
border-collapse: collapse;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth孩童(odd) {
background-color: #ffffff;
}
说明：
- nth-child(even) 选中第2、4、6……行
- nth-child(odd) 选中第1、3、5……行
- 配合 border-collapse: collapse 可避免边框间隙影响视觉效果
2. 忽略表头的隔行着色
如果表格有 thead 和 tbody，通常希望从 tbody 开始隔行变色，避免表头被影响。示例：
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tbody tr:nth-child(odd) {
background-color: #ffffff;
}
这样只有数据行会应用交替背景色，表头保持独立样式。
3. 简化写法：只设置一种颜色
多数情况下，只需为偶数行添加背景色，奇数行保持默认即可。常用简洁写法：
立即学习“前端免费学习笔记（深入）”；
tr:nth-child(even) {
background-color: #f0f0f0;
}
这种方式更高效，视觉上同样清晰易读。
基本上就这些。使用 :nth-child 是现代浏览器推荐做法，兼容性好，写法简洁，能快速实现表格隔行变色效果。 
