javascript - 设置斑马条纹表行的背景色

我在用:

tr:nth-child(2n+1) {
  background-color: #DDDDDD;
}

斑马纹桌子。我上课:

.redbg {
  background-color: #FF6666;
}

并正在使用:

$(this).parent().parent().addClass("redbg");

在需要时使用JQuery更改行的背景色。

不幸的是，它仅适用于非2n + 1行。如何为#DDDDDD行重新着色？

最佳答案

只需更改“redbg”类以将tr添加到前面:

tr.redbg {
    background-color: #FF6666;
}

发生这种情况是因为tr:nth-child(2n+1)比.redbg更具体，所以无论如何它都会覆盖背景色。将其更改为tr.redbg使其具有特定的含义，因此“redbg”类将覆盖:nth-child()选择器。

See the jsFiddle

注意事项，以供将来引用:必须在tr.redbg选择器之后定义tr:nth-child(2n+1)选择器，以便覆盖背景颜色。