如何使 CSS 样式覆盖 JavaScript 应用的样式

Question

我动态创建一个HTML表，并应用一些样式：

var tbl = document.createElement('table');
tbl.id = "CrewMemberTable";
document.getElementById("CrewMemberPanel").appendChild(tbl);

然后，我在表格中插入行和单元格(为简洁起见，本例中只有三个(：

CrewRow = document.getElementById("CrewMemberTable").insertRow(-1);
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "this text";
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "some text";
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "more text";

在最后一个单元格上，我通过javascript应用了一个样式：

CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "more text";
CrewCell.style.backgroundColor = "GREEN";

最后，我在我的.CSS 样式表：

#CrewMemberTable tr:hover {
background-color: RED !important;
}

严格来说，当我运行它时，我想没有什么问题。 它正在做我要求它做的事情。

但是- 我希望悬停覆盖整行，但它只覆盖前两个单元格，最后一个单元格，在 javascript 中分配背景颜色，它保持绿色。 我希望整行为红色。

这可能吗？ 又如何？

Answer 1

您将需要一个具有更特异性的选择器，例如

#CrewMemberTable tr:hover, #CrewMemberTable tr:hover td {
background-color: RED !important;
}

除了行之外，您还特别希望定位单元格。(如果需要，可以向单元格添加类或 id，以促进更高特异性的定位。

请参阅下面的代码片段，了解使用您在问题中提供的代码结构的工作示例：

var tbl = document.createElement('table');
tbl.id = "CrewMemberTable";
document.getElementById("CrewMemberPanel").appendChild(tbl);
CrewRow = document.getElementById("CrewMemberTable").insertRow(-1);
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "this text";
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "some text";
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "more text";
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "more text";
CrewCell.style.backgroundColor = "GREEN";

#CrewMemberTable tr:hover, #CrewMemberTable tr:hover td {
background-color: RED !important;
}

<div id="CrewMemberPanel"></div>

Answer 2

问题是，您只使用 CSS 定位<tr>，但GREEN背景在<td>上。

将其添加到您的 CSS 中

#CrewMemberTable tr:hover td {
background-color: transparent !important;
}

演示

#CrewMemberTable tr:hover {
background-color: RED !important;
}
#CrewMemberTable tr:hover td {
background-color: transparent !important;
}

<div id="CrewMemberPanel">
<table id="CrewMemberTable">
<tr>
<td>this text</td>
<td>some text</td>
<td style="background-color: GREEN">more text</td>
</tr>
</table>
</div>