在网页表格开发中，交替行样式也就是常说的斑马纹效果，能够有效区分不同行的数据，降低用户阅读时的视觉疲劳。使用CSS的tr:nth-child选择器可以快速实现这个效果，不需要额外给表格行添加类名，减少HTML结构的冗余。
tr:nth-child的基本语法
nth-child是CSS3新增的结构化伪类选择器，作用是匹配父元素下符合指定规则的子元素。当和tr标签结合使用时，会匹配表格中符合规则的表格行元素。基本语法格式如下：
/* 选择父元素下的第n个tr子元素 */
tr:nth-child(参数) {
样式属性: 属性值;
}
这里的参数可以是具体的数字、关键词或者包含n的表达式，不同的参数对应不同的匹配规则。
交替行样式的常见实现方式
1. 奇偶行交替样式
最常用的场景是给奇数行和偶数行设置不同的背景色，只需要使用odd和even两个关键词即可：
/* 奇数行背景色 */
tr:nth-child(odd) {
background-color: #f9f9f9;
}
/* 偶数行背景色 */
tr:nth-child(even) {
background-color: #ffffff;
}
也可以把两个规则合并，奇偶行使用同一个选择器设置不同样式，不过分开写逻辑更清晰，方便后续调整。
2. 自定义周期的交替样式
如果需要每3行、每4行交替一次样式，可以使用包含n的表达式，n是从0开始递增的自然数：
/* 每3行一个周期，第1、4、7...行设置样式 */
tr:nth-child(3n+1) {
background-color: #e8f4ff;
}
/* 每3行一个周期，第2、5、8...行设置样式 */
tr:nth-child(3n+2) {
background-color: #f0f0f0;
}
/* 每3行一个周期，第3、6、9...行设置样式 */
tr:nth-child(3n) {
background-color: #ffffff;
}
完整示例代码
下面是一个完整的HTML表格加CSS样式的示例，实现基础的奇偶行交替效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格交替行样式示例</title>
<style>
table {
width: 600px;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
/* 奇数行背景色 */
tr:nth-child(odd) {
background-color: #f9f9f9;
}
/* 偶数行背景色 */
tr:nth-child(even) {
background-color: #ffffff;
}
/* 鼠标悬停行高亮 */
tr:hover {
background-color: #e8f4ff;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>28</td>
<td>上海</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>22</td>
<td>广州</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>30</td>
<td>深圳</td>
</tr>
<tr>
<td>5</td>
<td>孙七</td>
<td>27</td>
<td>杭州</td>
</tr>
</tbody>
</table>
</body>
</html>
常见使用误区
- 忽略
thead和tbody的层级：如果表格没有显式写tbody，浏览器会自动把tr包裹在tbody里，此时nth-child计算的是tbody下的子元素，不会把thead里的表头行算进去，这一点不需要额外处理，是浏览器的默认行为。 - 混淆
nth-child和nth-of-type：nth-child匹配父元素下所有子元素中的第n个，而nth-of-type只匹配同类型元素中的第n个。如果表格行里混入了其他元素，使用nth-child可能会匹配错误，此时可以换成tr:nth-of-type。 - 参数表达式写错：比如想匹配每2行交替，写成
2n+1和2n就可以，不需要额外加其他符号，n不需要定义，浏览器会自动处理递增逻辑。
兼容性说明
nth-child是CSS3的特性，支持IE9及以上版本的浏览器，现代浏览器比如Chrome、Firefox、Edge、Safari都完全支持，不需要添加浏览器前缀。如果需要兼容更低版本的IE浏览器，建议使用JavaScript给行添加类名的方式实现交替样式。
CSS_selectornth-childalternating_row_styletr_element修改时间：2026-06-23 03:03:22