如何强制覆盖TD单元格CSS样式？解决斑马纹TR样式冲突

我明白你遇到的麻烦——自动生成的表格里，TR的斑马纹类（myTROdd/myTREven）把你给TD加的背景色样式压下去了。这本质上是CSS选择器**特异性（specificity）**的问题，咱们一步步来解决：

方法1：提升选择器特异性（推荐） #

这是最符合CSS设计原则的方案，不需要用粗暴的!important。你可以把TR的斑马纹类和TD的目标类组合起来写选择器，让它的特异性超过原来的斑马纹样式：

/* 合并写法，同时覆盖奇偶行的TD */
.myTROdd td.myBackRed, .myTREven td.myBackRed {
  background-color: #FF0000;
}

原理是：原来的斑马纹样式大概率是.myTROdd td这类写法（特异性为10+1=11），而上面的选择器是类+标签+类的组合（特异性为10+1+10=21），优先级更高，自然能覆盖原有样式。

方法2：使用!important（谨慎使用） #

如果你不想针对两种TR类分别写样式，可以用!important强制提升优先级，但要注意：这会跳过CSS的层叠规则，后续如果要修改这个样式会更麻烦，所以尽量只在紧急情况下用：

.myBackRed {
  background-color: #FF0000 !important;
}

方法3：内联样式（不推荐，除非必要） #

内联样式的优先级是最高的，直接写在TD标签里就能立刻生效，但缺点是样式和HTML结构耦合，不利于后期维护和批量修改：

<td class="myBackRed" style="background-color: #FF0000;">Highlight this cell</td>

总结一下，优先选方法1，既符合CSS规范，又能干净地覆盖原有样式，不会留下后续维护的隐患～

内容的提问来源于stack exchange，提问作者Kristen