css - 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旧浏览器不支持选择器。

score 1 · Accepted Answer

好吧，您编写的.latest-review是应用于<tr>，但您的代码片段使用<td>and <th>。无论哪种方式，在您的悬停规则之后简单地添加一个更简单的第二条规则（而不是使用:not）更容易恕我直言：

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

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

score 0 · Accepted Answer

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

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

2 回答 2