使用:nth-child(even)和:nth-child(odd)设置不同background-color可实现多列列表隔行变色，适用于表格或列表；在多列布局中该选择器按文档流连续计算行号，导致跨列颜色延续，无法实现每列独立隔行变色，目前主流方案仍为全局顺序着色，建议保持结构清晰并测试响应式效果。
在CSS中实现多列列表隔行不同背景色，可以通过 :nth-child 伪类选择器结合 background-color 来完成。这种方法适用于表格、列表或其他重复结构的元素，让视觉更清晰易读。
使用 :nth-child(even) 和 :nth-child(odd)
通过为奇数行和偶数行分别设置不同的背景色，可以轻松实现隔行变色效果。
例如，有一个无序列表或表格：- 第1行
- 第2行
- 第3行
- 第4行
对应的CSS样式如下：
立即学习“前端免费学习笔记（深入）”；
li {
padding: 10px;
}
li:nth-child(even) {
background-color: #f0f0f0;
}
li:nth-child(odd) {
background-color: #ffffff;
}
这样，偶数行会显示浅灰色背景，奇数行为白色，形成交替效果。
应用于多列布局中的行
如果你使用的是CSS多列布局（如 column-count），:nth-child 依然按文档流中的顺序生效，不是按视觉上的“每列内隔行”变色，而是整个列表连续计算行号。
例如：ul {
column-count: 3;
list-style: none;
padding: 0;
}
li {
break-inside: avoid;
padding: 8px;
}
li:nth-child(odd) {
background-color: #eef;
}
此时背景色是跨列连续变化的，第一列第1行是奇数，第二列第2行是偶数（无色），第三列第3行又是奇数，颜色一致延续，不会每列独立变色。
注意事项与建议
想要实现“每列内部隔行变色”在纯CSS中较难做到，因为CSS无法感知多列换行后的视觉位置。目前主流方案仍是全局按顺序隔行着色。- 确保HTML结构清晰，便于选择器准确匹配
- 可搭配 transition 实现鼠标悬停高亮效果
- 避免对复杂嵌套元素使用过于复杂的 nth-child 公式
- 测试在不同屏幕尺寸下多列换行时的视觉表现
