最稳妥的表格行级高亮方案是直接为 tr 或 td 显式添加 class 和 data-* 属性并配合内联 style，避免依赖伪类选择器、确保 colspan/rowspan 下视觉连续性，并适配 excel 导出。
table 中用 tr 和 td 控制行级高亮逻辑
直接给某一行加背景色最稳妥，别依赖 CSS 选择器自动匹配——浏览器对 table 的样式继承行为不一致，尤其在嵌套或有空单元格时容易失效。
实际做法是：在需要对比的 tr 上显式加 class，比如 <tr class="highlight-diff">，再配 CSS：<code>.highlight-diff { background-color: #fff3cd; }。避免用 :nth-child(2) 这类伪类，因为一旦插入新行或服务端动态渲染顺序变化，高亮就错位。
用 data-* 属性标记对比维度，避免硬编码颜色
如果清单要按“价格”“交付周期”“兼容性”等不同字段做高亮，把判断依据存在 HTML 里更可控。比如：<td data-metric="price" data-value="299">¥299</td>。JS 可读取这些属性批量比较，CSS 也可配合属性选择器写规则：td[data-metric="price"][data-value="299"] { background-color: #d4edda; }。这样改规则不用动 HTML 结构，也比用 class 名如 price-low 更易维护。
注意 colspan 和 rowspan 会破坏高亮区域连续性
带合并单元格的表格，高亮整行时容易漏掉被 rowspan 占用的单元格，导致视觉断层。解决方法只有两个：
• 所有高亮行禁用 rowspan，改用 JS 渲染重复内容（适合数据量小）
• 高亮只作用于 td，不碰 tr，并为每个需高亮的 td 单独加 class
• 若必须用 colspan，确保它只出现在表头或汇总行，不在对比主体行内
导出 Excel 时高亮丢失？得靠 style 内联属性保底
很多前端导出库（如 SheetJS）不识别外部 CSS 或 class，只读内联 style。所以关键对比行/单元格，除了 class，还得补上内联样式：<tr style="background-color:#fff3cd"> 或 <code><td style="background-color:#d4edda">。注意：不要写成 <code>!important，导出工具通常忽略；也不要写 RGB 或 HSL，部分老版本 Excel 只认十六进制颜色码。
真正麻烦的是多维对比——比如同时按价格最低、交付最快、兼容性最强三个条件高亮不同列，且允许用户切换对比模式。这时候 class + data 属性 + 少量 JS 组合是唯一可维护的路，纯 CSS 做不了动态判定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
