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

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()选择器.

看到j​​sFiddle

注意以供将来参考:该tr.redbg选择必须定义后的tr:nth-child(2n+1),以便它覆盖的背景颜色选择.