使用 :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……等奇数位置的子元素。通过为这些元素设置背景色，就能实现奇数项高亮的效果。

示例代码：

<ul class="multi-column-list">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
  <li>项目 5</li>
</ul>

.multi-column-list {
  column-count: 3; /* 设置三列布局 */
  list-style: none;
  padding: 0;
}
<p>.multi-column-list li {
padding: 10px;
margin-bottom: 2px;
}</p><p>/<em> 为奇数项添加背景色 </em>/
.multi-column-list li:nth-child(odd) {
background-color: #f0f8ff;
}</p>

2. 注意事项与常见问题

虽然视觉上列表被分成了多列，但DOM结构仍是线性排列，因此 :nth-child 是基于元素在HTML中的顺序来计算的，而不是按列中的位置。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 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) 能轻松实现多列列表中奇数项的背景着色。