CSS 课堂笔记：表格奇偶行不同背景色

CSS 课堂笔记：表格奇偶行不同背景色

一、核心语法

1. 基本写法

css

tr:nth-child(odd) {
    background-color: red;
}
tr:nth-child(even) {
    background-color: aquamarine;
}

选择器	含义	作用
tr:nth-child(odd)	选择第 1、3、5、7... 行（奇数行）	设置为红色背景
tr:nth-child(even)	选择第 2、4、6、8... 行（偶数行）	设置为浅蓝绿色背景

2. 效果说明

• 表格行会呈现红、浅蓝绿、红、浅蓝绿的交替效果。
• 用户浏览时视觉上更容易区分每一行数据，避免看串行。

---

二、nth-child() 的两种常用写法

写法	含义	选中行号
odd	奇数行	1, 3, 5, 7, 9...
even	偶数行	2, 4, 6, 8, 10...
2n+1	奇数行（等价于 odd）	1, 3, 5, 7...
2n	偶数行（等价于 even）	2, 4, 6, 8...
3n	每第 3 行	3, 6, 9, 12...
n+2	从第 2 行开始所有行	2, 3, 4, 5...
-n+3	前 3 行	1, 2, 3

---

三、写法对比

写法	优点	缺点
odd / even	语义清晰，易读易记	只能选奇偶，不能自定义间隔
2n+1 / 2n	灵活，可推广到其他间隔	需要理解公式，不太直观
nth-child(an+b)	功能最强大，可任意规律	公式较抽象

推荐：对于奇偶行，直接用 odd 和 even，代码最清晰。

---

四、完整示例结构

html

<table>
    <tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
    <tr><td>张三</td><td>25</td><td>北京</td></tr>
    <tr><td>李四</td><td>30</td><td>上海</td></tr>
    <tr><td>王五</td><td>28</td><td>广州</td></tr>
    <tr><td>赵六</td><td>22</td><td>深圳</td></tr>
</table>

应用样式后的效果：

行	角色	背景色
第 1 行	表头（th）	无样式（或单独设置）
第 2 行	奇数行（tr）	红色
第 3 行	偶数行（tr）	浅蓝绿色
第 4 行	奇数行（tr）	红色
第 5 行	偶数行（tr）	浅蓝绿色

---

五、注意事项

注意事项	说明
表头行会被选中	nth-child 选择的是所有 <tr>，包括表头行。如果不想让表头变色，可以给表头单独设样式覆盖，或用 tbody tr:nth-child(odd) 只选 tbody 内的行。
选择器优先级	如果行内已有 style 或更高优先级的选择器，nth-child 可能不生效。
背景色与边框	行背景色不会覆盖单元格（td、th）自己的背景色，如果 td 单独有背景色，行背景会被遮挡。

---

六、进阶写法

1. 只针对 tbody 内的行（避开表头）

css

tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
    background-color: #ffffff;
}

2. 简写为一行（利用 nth-child 的公式）

css

/* 所有奇数行和偶数行同时设置，避免重复代码 */
tr:nth-child(odd)  { background: #f9f9f9; }
tr:nth-child(even) { background: #ffffff; }

3. 悬停高亮（配合使用）

css

tr:hover {
    background-color: #ffeb3b !important;  /* 鼠标悬停时变黄色 */
}

---

七、常见配色推荐

风格	奇数行	偶数行	适用场景
极简灰	#f9f9f9	#ffffff	数据表格、后台管理系统
浅蓝系	#e3f2fd	#ffffff	企业官网、信息展示
柔和绿	#e8f5e9	#ffffff	健康类、环保类网站
高对比	#fce4ec（粉）	#e8f5e9（绿）	需要强调区分的表格
深色主题	#2d2d2d	#3d3d3d	夜间模式、游戏后台