html - 如何使表行背景颜色覆盖单元格输入元素的背景颜色？

Question

当用户单击表格行时，我将以下类应用于该行

tr.selected {
background-color:#FFA76C;
}

但是，单元格中的输入具有覆盖行背景颜色的背景颜色。 (例如在附图中，第一行和第三行被选中。第一行，单元格 1 和 3 输入用黄色覆盖行背景。)

我希望行的背景色在选中时成为主要颜色，覆盖行内表格单元格输入的颜色。

function selectRow(row) {
    if (row.className.indexOf("selected") != -1) {
        row.className = row.className.replace("selected", "");
    } else {
        row.className += " selected";
    }
}

tr.selected{
    background-color:#FFA76C;
}

<table>
<tbody>
  <tr class="selected"  style="height: 20px;">
  <th align="left" style="font-size:11px;border:1px solid grey;padding-bottom: 3px;white-space: nowrap;" onclick="selectRow(this.parentNode);"><div style="width:15px"></div>
  </th>
  <td align="left" style="font-size:11px;border:1px solid grey;height: 20px;overflow: hidden; white-space: nowrap;">
  <input type="text" style="border: none; width: 150px; height: 100%; text-align: center; overflow: hidden; background: rgb(255, 255, 0);">
  </td>
  
  <td align="left" style="font-size:11px;border:1px solid grey;height: 100%;overflow: hidden;align: left; white-space: nowrap;"><input type="text" style="border: none;width: 150px;height: 100%;text-align: center;overflow: hidden;background: transparent;"></td>
  
  <td align="left" style="font-size:11px;border:1px solid grey;width: 99%;overflow: hidden;"><input type="text"  style="border: none; width: 100%; height: 100%; text-align: center; overflow: hidden; background: rgb(255, 255, 0);"></td>
  </tr>
</tbody>
</table>

Answer 1

应用这个

tr.selected td {
    background-color:#FFA76C !important;
}

为了避免 !important，请在覆盖此属性的单元格属性之后定义此属性。