CSS奇数行样式设置方法详解

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《CSS选择奇数行元素的方法有多种，最常用的是使用 :nth-child(odd) 伪类选择器。以下是一些常见的用法和示例：✅ 方法一：使用 :nth-child(odd)tr:nth-child(odd) { background-color: #f2f2f2; }说明：tr 是目标元素（如表格行）。:nth-child(odd) 会选择所有奇数行（第1、3、5...行）。✅ 方法二：使用 :nth-of-type(odd)tr:nth-of-type(odd) { background-color: #f2f2f2; }说明：:nth-of-type(odd) 和 :nth-child(odd) 的效果相同，但更精确地匹配特定类型的子元素（比如只选

使用 :nth-child(odd) 或 :nth-child(2n+1) 可选择奇数行，前者更直观，后者通过公式实现，均适用于表格或列表的隔行样式设置。

要通过 CSS 选择所有奇数行元素，可以使用 :nth-child() 伪类选择器。这个选择器支持公式计算，能精准定位特定位置的子元素。

使用 :nth-child(odd) 选择奇数行

这是最直接的方式，odd 关键字代表“奇数”，会匹配第 1、3、5、7... 行。

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

这段代码会给表格中所有奇数行设置浅灰色背景。

使用公式 :nth-child(2n+1)

2n+1 是数学表达式，表示从 1 开始，每隔一个元素选一次，结果同样是奇数项。

li:nth-child(2n+1) {
  color: blue;
}

适用于列表、表格或其他容器内的子元素，比如让奇数行文字变蓝。

注意事项

确保目标元素是父容器的直接子元素，并且计数从 1 开始。如果前有其他类型元素干扰，可能影响匹配结果。可结合更具体的选择器避免冲突，例如：

table tbody tr:nth-child(odd)

这样更精确地限定表格主体中的奇数行。

基本上就这些，用 :nth-child(odd) 最直观，也易于维护。

本篇关于《CSS奇数行样式设置方法详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！