为何tr.makeitred无法覆盖td.makeitblue的CSS样式？优先级失效排查

哈哈，这个问题其实是很多刚接触CSS的同学容易踩的坑——混淆了CSS优先级和样式继承的区别！

核心原因：继承的样式优先级永远低于直接应用在元素上的样式 #

你以为tr.makeitred的优先级比.makeitblue高，但这里的关键是：tr.makeitred的color样式是通过继承传递给td元素的，而.makeitblue是直接应用在td元素本身的样式。

CSS的优先级规则只适用于直接作用在目标元素上的选择器，继承来的样式不管父元素的选择器优先级多高（哪怕加了!important），都打不过直接写在目标元素上的样式。哪怕你给tr.makeitred { color:red !important; }，这个!important只是让tr自己的color强制变红，但td继承的这个样式还是干不过td自己的.makeitblue样式。

验证逻辑：用浏览器开发者工具看样式 #

打开浏览器调试面板查看那个蓝色td的样式，你会发现：

• 来自tr.makeitred的color: red会被标记为划掉的继承样式
• 来自.makeitblue的color: blue是直接应用的有效样式

解决办法：几个可行的方案 #

方案1：直接选择目标td元素（推荐）

写一个直接作用在td上的选择器，优先级超过.makeitblue：

tr.makeitred td.makeitblue { color: red; }
.makeitblue { color: blue; }

这个选择器的优先级是「元素选择器+类选择器+类选择器」，比单纯的.makeitblue（仅类选择器）优先级更高，会成功覆盖蓝色样式。

方案2：用!important强制覆盖（不推荐，尽量少用）

如果你一定要通过tr的样式强制覆盖所有子元素，可以把样式直接作用在子元素上并加!important：

tr.makeitred * { color: red !important; }
.makeitblue { color: blue; }

但!important会破坏CSS的正常优先级规则，后续维护会变得复杂，所以非必要不建议使用。

方案3：重构样式或HTML结构

比如给需要变红的td单独加类，从根源避免继承冲突：

<tr>
  <td class="makeitred">Red</td>
  <td class="makeitblue">Blue</td>
</tr>

这样每个元素的样式都是直接应用的，自然不会有优先级冲突问题。

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