CSS隔行高亮表格实现方法

本文详解了如何使用CSS的:nth-child()伪类实现表格隔行高亮效果，重点强调通过限定在tbody内选择tr元素（如tbody tr:nth-child(even)）来精准作用于数据行、避开表头和脚注，避免常见样式误配问题；同时对比了偶数行与奇数行高亮的写法、兼容性考量及IE8等老旧浏览器的替代方案，内容实用精炼，是前端开发中提升表格可读性与代码健壮性的必备技巧。

用 nth-child 实现表格隔行高亮，关键是选中偶数行或奇数行的 tr 元素，并为其设置背景色。

基础写法：偶数行高亮

最常用的是给偶数行（第2、4、6…行）加背景色：

table tr:nth-child(even) {
  background-color: #f5f5f5;
}

其中 even 等价于 2n，表示所有偶数位置的 tr。

奇数行高亮（比如首行强调）

如果想高亮第1、3、5…行，用 odd 或 2n+1：

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

注意：只作用于同级 tr，避开表头和脚注

如果表格含 thead 和 tbody，直接写 tr:nth-child(even) 可能误选表头行。更稳妥的方式是限定在 tbody 内：

• tbody tr:nth-child(even) —— 正确，只对数据行生效
• table tr:nth-child(even) —— 可能连 thead > tr 一起高亮（取决于 HTML 结构）

推荐始终加上 tbody 限定，避免意外。

兼容性与替代方案

:nth-child() 在 IE9+ 及所有现代浏览器中都支持。如需兼容 IE8，可用 JS 或为每行手动加 class（如 class="row-even"），但已不推荐。

不复杂但容易忽略。

到这里，我们也就讲完了《CSS隔行高亮表格实现方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！