Question

我有一张桌子，它有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");
});

这只会将列标记为红色。但是我希望将我点击的所有列标记为红色。我怎么能这样做？

Answer 1

以下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;
}

最后，您可以删除＆＃34; .priority-table tr：nth-child（偶数）＆＃34;如果不需要，请上课。

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

Answer 2

在你的css中添加！important ：

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

使用备用表行时，表行背景颜色不会更改

2 个答案: