Bootstrap 3特定行的替代悬停颜色答案

【问题标题】：Bootstrap 3 Alternative hover colour for specific rowBootstrap 3特定行的替代悬停颜色
【发布时间】：2016-03-03 15:31:03
【问题描述】：

我有一个名为“table-green-hover”的类，当它设置在桌子上时，它的悬停颜色是浅绿色，而不是通常的引导颜色

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

但是对于我表中的 2 个特定行（具有“注销悬停”类），我希望它们是完全不同的颜色，我想这样做

.logout-hover > tr:hover > td { background-color: LightBlue; }

虽然它似乎根本没有做任何事情，但当我将鼠标悬停在这 2 个特定行上时，它们仍会以 LightGreen 显示。

【问题讨论】：

你能创建一个演示/提供所有相关代码吗？
table-green-hover 和 logout-hover 类是否都应用于同一个 table？还是 logout-hover 类应用于 tr 元素？请向我们展示您的 HTML。
table-green-hover 在 table 元素上，logout-hover 在特定的 tr 元素上
示例：bootply.com/0jErIpZxfK

【解决方案1】：

根据 OP 的评论进行编辑：

.table-green-hover tr.logout-hover:hover > td { background-color: LightBlue; }

旧答案：

.logout-hover > tbody > tr:hover > td { background-color: LightBlue; }

原因是因为 .table-green-hover > tbody > tr:hover > th（1 个类，3 个元素）比.logout-hover > tr:hover > td（1 个类，2 个元素）更具体，因此具有更高的优先级。

【讨论】：