能否使用<tr>标签样式覆盖<td>标签内的样式？

问题场景 #

尝试通过<tr>的行内样式background-color:#AAAAAA !important;覆盖<td>里的红色背景及背景图，但运行后<td>的样式依然显示：

<table>
  <tr style="background-color:#AAAAAA !important;">
    <td style="background-color:#FF0000; background-image:url(https://picsum.photos/200/300); background-repeat: no-repeat;">test</td>
  </tr>
</table>

核心原因 #

这是因为子元素（<td>）的行内样式优先级远高于父元素（<tr>）的样式，而且子元素的背景会直接绘制在自身区域，完全覆盖父元素的背景——哪怕父元素加了!important也没用，!important只能提升当前元素样式的优先级，无法让父元素样式穿透到子元素上。

可行解决方案 #

方案1：移除<td>的行内样式

直接删掉<td>里的style属性，让它默认继承<tr>的背景样式：

<table>
  <tr style="background-color:#AAAAAA;">
    <td>test</td>
  </tr>
</table>

方案2：强制<td>继承父元素背景

如果需要保留<td>的其他行内样式，可通过background: inherit让它继承父元素背景，同时清除自身的背景图和背景色：

<table>
  <tr style="background-color:#AAAAAA;">
    <td style="background: inherit; background-image: none;">test</td>
  </tr>
</table>

方案3：使用外部样式表（推荐）

避免行内样式，用CSS选择器精准控制，后续维护更便捷：

/* 给目标<tr>添加类名 */
.target-row {
  background-color: #AAAAAA;
}
/* 让该行下的<td>继承背景并清除自身背景属性 */
.target-row td {
  background: inherit;
  background-image: none;
}

对应HTML结构：

<table>
  <tr class="target-row">
    <td>test</td>
  </tr>
</table>

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