如何为HTML中不同表格的td元素设置差异化hover背景色？

核心思路是给每个表格添加专属类名，通过类选择器精准定位目标表格下的<td>元素，从而实现不同表格的hover效果区分。

步骤1：给HTML表格添加类名 #

给需要设置hover效果的表格添加独特的类名，比如给单选按钮表格加type-picker-table，结果展示表格加type-effect-table：

<!-- 单选按钮表格 -->
<table class="type-picker-table">
    <tr>
        <td>
            <label for="Normal1" class="Normal">Normal</label>
            <input type="radio" name="types1" checked="checked" id="Normal1" value="Normal" />
        </td>
        <td>
            <label for="Fire1" class="Fire">Fire</label>
            <input type="radio" name="types1" id="Fire1" value="Fire" />
        </td>
        <td>
            <label for="Water1" class="Water">Water</label>
            <input type="radio" name="types1" id="Water1" value="Water" />
        </td>
    </tr>
</table>

<!-- 结果展示表格 -->
<table class="type-effect-table">
    <tr>
        <td>
            <p class="AdjusterTypeStyle Normal">Normal</p>
            <p class="AdjusterNumberStyle NumberDisplay" id="NormalAdjust">x1</p>
        </td>
        <td>
            <p class="AdjusterTypeStyle Fire">Fire</p>
            <p class="AdjusterNumberStyle NumberDisplay" id="FireAdjust">x1</p>
        </td>
        <td>
            <p class="AdjusterTypeStyle Water">Water</p>
            <p class="AdjusterNumberStyle NumberDisplay" id="WaterAdjust">x1</p>
        </td>
    </tr>
</table>

步骤2：编写对应CSS样式 #

通过类选择器定位表格，再设置其内部<td>的hover效果，你可以给不同表格设置不同的hover颜色：

/* 单选按钮表格的td hover样式 */
.type-picker-table td:hover {
    background-color: #4CAF50; /* 绿色 */
}

/* 结果展示表格的td hover样式 */
.type-effect-table td:hover {
    background-color: #2196F3; /* 蓝色 */
}

你之前尝试的问题分析 #

1. 第一种方法中，你的CSS选择器写的是table tr td.ChangeColorOnHover:hover，但实际是给<table>加了ChangeColorOnHover类，这个选择器会寻找带有该类的td元素，而非表格下的所有td，所以不生效。
2. 第二种方法的table.ChangeColorOnHover tr td:hover其实是正确的写法，如果没生效，大概率是：
   • HTML中没有正确给表格添加类名
   • 存在其他优先级更高的CSS样式覆盖了这个规则

额外优化建议 #

• 使用语义化的类名（比如type-picker-table比ChangeColorOnHover更清晰），方便后续维护
• 如果需要给特定属性的td设置hover（比如Fire属性），可以结合属性类名进一步精准定位：

  .type-picker-table td:hover .Fire {
      background-color: #FF9800; /* 橙色 */
  }
  

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