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

【问题标题】：Setting the background colour of zebra-striped table rows设置斑马条纹表行的背景颜色
【发布时间】：2013-03-04 06:24:56
【问题描述】：

我正在使用：

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

对表格进行斑马条纹处理。我有课：

.redbg {
  background-color: #FF6666;
}

并且正在使用：

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

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

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

【问题讨论】：

【解决方案1】：

只需更改“redbg”类即可将tr添加到前面：

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

这是因为tr:nth-child(2n+1) 比.redbg 更具体，所以无论如何它都会覆盖背景颜色。将其更改为 tr.redbg 使其同样具体，因此“redbg”类将覆盖 :nth-child() 选择器。

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

【讨论】：

【解决方案2】：

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

尝试将您的选择器更改为tr.redbg，看看是否可行。

【讨论】：

【解决方案3】：

不要使用 !important（正如另一个答案所暗示的）

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

的内容

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

这是一个 great link 计算 CSS 特异性。

【讨论】：

【解决方案4】：

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

也许是这样的（虽然我还没有测试过，但应该能让你开始）：

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

}

【讨论】：

【解决方案5】：

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

把另一个改成

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

它应该可以工作

【讨论】：