使用CSS的:nth-child选择器可为表格添加条纹效果：通过tr:nth-child(odd)和tr:nth-child(even)设置奇偶行不同背景色，如#f2f2f2和#fff，并可配合tbody限定仅对数据行应用条纹，避免影响表头；若需跳过前n行，可用:nth-child(odd):nth-child(n+2)实现从第二行开始着色，结合:hover还能增强交互效果，提升数据可读性。
给表格添加条纹效果可以让数据更易读，通过CSS的 :nth-child 选择器可以轻松实现奇偶行不同背景色的效果。这种方法无需修改HTML结构，只需在CSS中定义样式规则即可。
使用 :nth-child(odd) 和 :nth-child(even)
你可以分别为奇数行和偶数行设置不同的背景颜色，从而形成条纹效果：
table {
width: 100%;
border-collapse: collapse;
}
tr:nth-child(odd) {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #ffffff;
}
/ 可选：添加边框或悬停效果 /
tr:hover {
background-color: #ddd;
}
在这个例子中，奇数行（1、3、5...）使用浅灰色背景，偶数行（2、4、6...）为白色，视觉上呈现交替条纹。
仅对 tbody 中的行应用条纹
如果表格包含 thead 或 tfoot，建议只对 tbody 内的行添加条纹，避免标题行被影响：
立即学习“前端免费学习笔记（深入）”；
tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
tbody tr:nth-child(even) {
background-color: #fff;
}
这样能确保表头保持独立样式，条纹仅作用于数据行。
使用 n + 数字跳过前几行
若想从第2行开始应用条纹（比如第一行是标题但未用 thead 包裹），可以用以下写法：
tr:nth-child(odd):nth-child(n+2) {
background-color: #f2f2f2;
}
这个选择器表示“从第2行开始的奇数行”，适合不规范结构的表格美化。
基本上就这些。利用 :nth-child 实现表格条纹简单高效，配合语义化标签如 thead 和 tbody 效果更佳。不复杂但容易忽略细节。
