CSS:nth-child(odd)选择器如何设置奇数元素样式_实现列表条纹效果-css教程-PHP中文网

CSS:nth-child(odd)选择器如何设置奇数元素样式_实现列表条纹效果

P粉602998670

发布： 2025-11-28 19:47:02

原创

198人浏览过

:nth-child(odd)用于选中父元素下奇数位置的子元素，常配合even实现条纹背景，提升可读性，适用于列表、表格等场景，需注意子元素顺序和类型对选择的影响。

css:nth-child(odd)选择器如何设置奇数元素样式_实现列表条纹效果

使用 :nth-child(odd) 选择器可以轻松为列表中的奇数项设置样式，常用于实现条纹效果，提升内容可读性。这个伪类会匹配父元素下索引为奇数的子元素（1、3、5…），从而让你针对性地添加背景色或其他样式。

在 CSS 中，:nth-child(odd) 的写法如下：

li:nth-child(odd) {
  background-color: #f0f0f0;
}

登录后复制

这段代码会让所有位于奇数位置的 li 元素拥有浅灰色背景。注意：这里的“奇数”是从 1 开始计数的，即第一个元素是奇数项。

条纹效果通常通过交替设置背景色实现。除了 odd，还可以配合 even 使用：

/* 奇数行设浅灰 */
li:nth-child(odd) {
  background-color: #eef5f9;
}
<p>/<em> 偶数行设白色（可选） </em>/
li:nth-child(even) {
background-color: #ffffff;
}

登录后复制

这样就能形成清晰的隔行变色效果，适用于表格、菜单或文章列表等场景。

:nth-child(odd) 不仅可用于列表，也能作用于表格行（tr）、网格项、卡片容器等。但需注意以下几点：

基本上就这些，掌握 odd 和 even 的搭配使用，能快速实现简洁美观的条纹布局，不复杂但容易忽略细节。

Bolt.new

Bolt.new是一个免费的AI全栈开发工具

466

以上就是CSS:nth-child(odd)选择器如何设置奇数元素样式_实现列表条纹效果的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css中flex-basis的使用 css中flex-direction属性是什么 css中盒模型的注意点 css中align-items属性是什么 css浮动元素的规则介绍