CSS nth-child超越了jQuery点击突出显示

Question

我有一个带有行条带的表,由CSS设置,我在jQuery中也有一个click函数.我的代码:

$(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突出显示单行时单击.

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

我试着按照这个答案如何在选择tr来覆盖父div上的第n个子类时如何使用jquery addClass？把我的".highlight"增加到"#datatable tr .highlight",但仍然没有运气.

Answer 1

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

那么你的CSS开头是不正确的:

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

说a里面的一个元素tr有一个类,highlight但是你的jquery直接将类应用到了tr你应该使用的类:

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

微妙的区别是tr和之间的单一空间.highlight.

tr .hightlight {}

与...非常不同

tr.hightlight {}

我还强烈建议您阅读解耦HTML,CSS和JavaScript.你的CSS与你的html紧密相连.