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

Question

我正在使用：

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

斑马条纹表。我有课：

.redbg {
  background-color: #FF6666;
}

正在使用：

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

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

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

Answer 1

只需更改“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)选择器之后定义，以便覆盖背景颜色

Answer 2

似乎这可能与CSS特异性规则有关。

尝试将您的选择器更改为tr.redbg并查看是否有效。

Answer 3

请勿使用 !important（另有答案建议）

相反，请使您的选择器更具体。添加添加类似

的内容

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

这是计算CSS特异性的great link。

Answer 4

我认为你需要让你的redbg类比第n个孩子更明确地覆盖它。

也许类似的东西（虽然我没有测试过，但应该让你开始）：

.redbg, tr.redbg:nth-child(2n+1)
{
background-color: #FF6666;

}

Answer 5

关于tr:nth-child(2n+1)的优先事项，因为它是更具体的选择器。

将另一个更改为

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

并且它应该工作