css多列列表非偶数项加背景色如何实现_使用:nth-child和background-color-css教程-PHP中文网

css多列列表非偶数项加背景色如何实现_使用:nth-child和background-color

P粉602998670

发布： 2025-12-22 19:30:02

原创

155人浏览过

使用 :nth-child(odd) 可为CSS多列列表中的奇数项设置背景色，该选择器基于HTML顺序匹配第1、3、5…个子元素，结合 background-color 实现高亮，注意多列布局中DOM顺序决定选中项，与视觉列位置无关。

css多列列表非偶数项加背景色如何实现_使用:nth-child和background-color

要为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中的顺序来计算的，而不是按列中的位置。

确保 column-count 或 columns 属性正确设置，以启用多列布局
如果列表项高度不一致，可能导致跨列显示，影响视觉效果
:nth-child(odd) 和 :nth-child(2n+1) 效果相同，可互换使用

3. 替代方案：使用 :nth-child(even) 设置偶数项样式

如果你希望偶数项有背景色，也可以使用 :nth-child(even)：

魔术橡皮擦

智能擦除、填补背景内容

105

查看详情

立即学习“前端免费学习笔记（深入）”；

.multi-column-list li:nth-child(even) {
  background-color: #f9f9f9;
}

登录后复制

基本上就这些，利用 :nth-child(odd) 能轻松实现多列列表中奇数项的背景着色。

以上就是css多列列表非偶数项加背景色如何实现_使用:nth-child和background-color的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css定位叠放次序的使用注意 css标签选择器的使用注意 css中grid网格布局的介绍 css global在类名的应用 css padding内边距的理解