javascript - CSS nth-child 覆盖了 jQuery 点击高亮

Question

我有一个带行条纹的表格，由 CSS 设置，我还有一个 jQuery 中的点击功能。我的代码:

$(document).on('click', '.datarow', function() {
  $(".datarow").removeClass("highlight");
  $(this).addClass("highlight");
  // other code for row select
});

#datatable tr:nth-child(odd) {
  background-color: #fff;
  cursor: pointer;
}

#datatable tr:nth-child(even) {
  background-color: #fafafa;
  cursor: pointer;
}

#datatable tr:hover {
  background-color: #ddd;
}

#datatable tr .highlight {
  background-color: #fbbc05;
}

<table id="datatable">
<tr class="datarow">...</tr>
...
</table>

jQuery 行突出显示不起作用。

但是，如果我删除 CSS nth-child 代码，那么 jQuery 会按预期工作。

所以 CSS nth-child 高亮显示在点击时超越了 jQuery 高亮显示一行。

我怎样才能让两者一起工作？

我试着按照这个答案 how can I use jquery addClass when selecting a tr to override a nth-child class on a parent div?通过将我的“.highlight”增加到“#datatable tr .highlight”但仍然没有运气。

Answer 1

How can I get both working together?

嗯，你的 CSS 一开始就不正确:

#datatable tr .highlight {
  background-color: #fbbc05;
}

表示 tr 中的元素具有 highlight 类，但您的 jquery 将类直接应用于 tr，因此您应该使用:

#datatable tr.highlight {
  background-color: #fbbc05;
}

细微差别是 tr 和 .highlight 之间的单个空格。

tr .hightlight {}

非常不同于

tr.hightlight {}

我也强烈推荐阅读 Decoupling Your HTML, CSS, and JavaScript .您的 CSS 与您的 html 紧密耦合。