css表格隔行高亮怎么写_使用nth child实现_网络技术

css表格隔行高亮怎么写_使用nth child实现

发布时间 - 2026-01-14 00:00:00 点击率：次

用 nth-child 实现表格隔行高亮的关键是选中 tbody 内偶数或奇数 tr 并设背景色：tbody tr:nth-child(even) { background-color: #f5f5f5; } 或 tbody tr:nth-child(odd) { background-color: #eef7ff; }，避免影响表头。

用 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 # html # js # 浏览器 # class

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：VSCode光标怎么变颜色_VSCode自定义光标颜色和高亮

下一篇：Win11双屏复制模式咋切换_Win11双屏复制设置法【切换

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher