使用 :nth-child(odd) 可为CSS多列列表中的奇数项设置背景色，该选择器基于HTML顺序匹配第1、3、5…个子元素，结合 background-color 实现高亮，注意多列布局中DOM顺序决定选中项，与视觉列位置无关。
要为CSS多列列表中的非偶数项（即奇数项）添加背景色，可以使用 :nth-child(odd) 伪类选择器结合 background-color 来实现。
1. 使用 :nth-child(odd) 选择奇数项
在CSS中，:nth-child(odd) 可以匹配父元素下的第1、3、5……等奇数位置的子元素。通过为这些元素设置背景色，就能实现奇数项高亮的效果。
示例代码：- 项目 1
- 项目 2
- 项目 3
- 项目 4
- 项目 5
.multi-column-list {
column-count: 3; /* 设置三列布局 */
list-style: none;
padding: 0;
}
.multi-column-list li {
padding: 10px;
margin-bottom: 2px;
}
/ 为奇数项添加背景色 /
.multi-column-list li:nth-child(odd) {
background-color: #f0f8ff;
}
2. 注意事项与常见问题
虽然视觉上列表被分成了多列，但DOM结构仍是线性排列，因此 :nth-child 是基于元素在HTML中的顺序来计算的，而不是按列中的位置。
- 确保 column-count 或 columns 属性正确设置，以启用多列布局
- 如果列表项高度不一致，可能导致跨列显示，影响视觉效果
- :nth-child(odd) 和 :nth-child(2n+1) 效果相同，可互换使用
3. 替代方案：使用 :nth-child(even) 设置偶数项样式
如果你希望偶数项有背景色，也可以使用 :nth-child(even)：
立即学习“前端免费学习笔记（深入）”；
.multi-column-list li:nth-child(even) {
background-color: #f9f9f9;
}
基本上就这些，利用 :nth-child(odd) 能轻松实现多列列表中奇数项的背景着色。
