最简单是用tr的style属性，但有三大陷阱：子元素背景色会覆盖行级样式；tr本身不渲染背景，仅传递给单元格；border-collapse下边框可能遮挡背景色。
直接用 tr 的 style 属性最简单，但有隐藏陷阱
给某一行加背景色，最直觉的做法是写 <tr style="background-color: #e0f7fa;">。它确实能立刻生效，但要注意三点：
<ul>
<li>如果该 <code>tr 下的 td 或 th 也设置了 background-color，会覆盖掉行级样式——浏览器按“子元素样式优先”渲染，不是叠加
tr 本身不渲染背景，它只是把颜色“传递”给子单元格；一旦某个 td 显式设了透明或白色背景，那块就露馅了border-collapse: collapse 的表格里，tr 的背景色可能被边框遮挡，尤其当边框是深色时，视觉上像“断开”
:nth-child() 选中偶数行/奇数行，但别硬编码索引
隔行变色（斑马纹）常用 tr:nth-child(even) 和 tr:nth-child(odd)，这没问题。但如果你写 tr:nth-child(3) 想标第三行，就得小心：
- 这个“3”指的是 DOM 中第 3 个
tr，包括thead里的tr—— 如果表头占一行，那实际数据行的“第三行”其实是第 4 个tr - 如果表格动态增删行，硬编码的
n值会立刻失效；更稳妥的是结合语义类，比如<tr class="status-error">，再用 <code>.status-error { background-color: #ffebee; } -
nth-child不区分thead/tbody，想只对数据行生效，得写成tbody tr:nth-child(even) - 避免用颜色名命名类，比如
bg-blue——后期换色时类名就失真了；改用语义名：row-highlight、row-pending、row-archived - 如果某行要同时有高亮 + 错误状态，别堆砌
class="row-highlight row-error"，而是让 CSS 支持组合：.row-highlight.row-error { background-color: #ffcdd2; } - 不要在
tr上写!important，否则 JS 用element.style.backgroundColor = '...'就覆盖不了；统一用 class 切换更可控 - 浏览器默认把所有
tr当作同级处理，thead tr和tbody tr的样式规则容易互相干扰 - 想只给表头行设背景，必须明确写
thead tr { background-color: #e3f2fd; }，而不是tr:first-child——后者在多行表头时会漏掉 -
tbody tr:hover这类交互样式，如果不包裹在tbody里，鼠标移到tfoot行也会触发，逻辑错乱 - 加上
thead/tbody后，CSS 选择器特异性更清晰，调试时在开发者工具里也更容易定位问题来源
用 class 控制行背景比内联样式更可靠
当需要复用、切换或 JS 动态控制时，class 是唯一合理选择。关键点不在“怎么写”，而在“怎么命名和组织”：
表格结构影响背景色渲染效果，thead/tbody 必须分清
很多背景色不生效，其实跟没写 thead 和 tbody 有关：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
