纯CSS打造表格三行一组斑马纹效果，告别JavaScript依赖！
许多应用场景需要为表格添加样式以提升可读性，例如常见的斑马纹。本文将详细讲解如何仅使用CSS代码，实现表格每三行一个背景色的效果。此方法尤其适用于打包成App的场景，无需依赖JavaScript等浏览器环境相关的代码。
目标：每三行一个不同的背景色，纯CSS实现，不依赖JavaScript。这在App打包时非常重要，因为App环境可能限制JavaScript的运行或访问浏览器API。
解决方案的核心是CSS的nth-child选择器。nth-child选择器允许我们根据元素在父元素中的位置来选择元素。为了实现每三行不同的背景色，我们需要巧妙地运用这个选择器。
立即学习“前端免费学习笔记（深入）”；
以下CSS代码实现了每三行一个斑马纹的效果：
.table {
border-collapse: collapse;
}
.table td {
border: 1px solid #ddd;
}
.table tr {
background-color: #f9f9f9; /* 默认背景色 */
}
.table tr:nth-child(3n+1),
.table tr:nth-child(3n+2),
.table tr:nth-child(3n+3) {
background-color: #fff; /* 白色背景 */
}
.table tr:nth-child(6n+4),
.table tr:nth-child(6n+5),
.table tr:nth-child(6n+6) {
background-color: #ccc; /* 灰色背景 */
}
这段代码首先设置了表格的基本样式，包括单元格边框和默认背景色。关键在于nth-child选择器：3n+1, 3n+2, 3n+3 选择每三行，并设置白色背景；6n+4, 6n+5, 6n+6 选择接下来的三行，设置灰色背景，以此循环实现三行一组的斑马纹效果。 请注意，此代码假设表格包含表头。如果您的表格不包含表头，需要调整nth-child选择器的表达式。
配合以下HTML结构：
| COL 1 | COL 2 |
|---|---|
| A | 1 |
| A | 2 |
| A | 3 |
| B | 1 |
| B | 2 |
| B | 3 |
即可实现无需JavaScript的每三行一组斑马纹表格样式，完美满足App打包需求。
