javascript - 如何使 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>