jquery - 使用备用表格行时表格行背景色不变

我有一张桌子，它有class="priority-table"。我有以下CSS用于替代行颜色和悬停颜色。

.priority-table tr td{
  white-space:nowrap;
}
.priority-table tr:hover{
  background-color: #E6E6FA;
}

.priority-table tr:hover:nth-child(even) {
  background-color: #E6E6FA;
}

.priority-table tr:nth-child(even) {
  background-color: #ffffff;
}

.highlight{
  background-color: red;
}

我想在单击时将行标记为红色，所以我添加了此jQuery

$(".priority-table tr:odd").click(function() {
  console.log('first');
  $(this).toggleClass("highlight");
});

$(".priority-table tr:even").click(function() {
  console.log('second');
  $(this).toggleClass("highlight");
});

$(".priority-table tr").click(function() {
  $(this).toggleClass("highlight");
});

这仅将偶数列标记为红色。但我想保留所有单击的列标记为红色。我怎样才能做到这一点？

最佳答案

以下CSS在偶数行上覆盖了您的红色悬停，因为它更具体。

.priority-table tr:nth-child(even) {
    background-color: #ffffff;
}

解决此问题的一种方法是，将重要属性添加到突出显示类中，例如

.highlight{
  background-color: red !important;
}

或更妙的是，添加此附加的类选择器，以使您拥有更特定版本的.highlight

.priority-table tr:nth-child(even).highlight{
  background-color: red !important;
}

最后，您可以删除“ .priority-table tr：nth-​​child（even）”类（如果不需要）。

示例：http://codepen.io/JasonGraham/pen/MeWLbO