CSS：不是选择器

Question

我正在尝试使用CSS3 :not选择器。基本上，我有一张表，当你悬停一行时，背景颜色会改变：

.table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th {
    background-color: #272727;
}

在其中一个<tr>上我将latest-review类应用于该行。当我将鼠标悬停在latest-review行上时，由于上面的CSS，背景颜色仍然会发生变化。我希望它不要改变颜色。我试过这个并且失败了：

.table-hover tbody tr:hover > td:not(.latest-review), .table-hover tbody tr:hover > th:not(.latest-review) {
    background-color: #272727;
}

我不确定此时还有什么可以尝试的。我目前正在使用Chrome，我并不担心旧浏览器不支持:not选择器。

Answer 1

好吧，您写道.latest-review已应用于<tr>，但您的代码段使用<td>和<th>。无论哪种方式，只需在悬停规则后添加更简单的第二条规则（而不是使用:not）就更容易了：

.table-hover tr:hover {
    background-color: #272727;
}

.table-hover .latest-review {
    background-color: %original_color%
}

Answer 2

第一个CSS规则会覆盖第二个。删除第一个或重置颜色：

.table-hover tbody tr:hover > td.latest-review, .table-hover tbody tr:hover > th.latest-review {
    background-color: default-color;
}