无法更改 twitter bootstrap 奇数表行的背景颜色答案

【问题标题】：Cannot change background-color of twitter bootstrap odd table's rows无法更改 twitter bootstrap 奇数表行的背景颜色
【发布时间】：2014-07-07 02:17:09
【问题描述】：

我有一张带有 Twitter Bootstrap css 文件的表格。该表定义如下：

<table class="table table-striped table-bordered table-hover">
...
</table>

使用 jQuery，我在表格行中的按钮上的单击事件之后添加了一个名为“.red-background”的类。

.red-background
{
    background-color: red !important;
    color: white !important;
}

问题是代码在对行上运行良好，但在奇数行上却不行！我不知道为什么，但删除表的类“table-striped”和“table-hover”，一切正常。 “红色背景”类中定义的“颜色”规则一直有效，但奇数行上的“背景颜色”无效。

【问题讨论】：

你能分享一下小提琴吗？？
添加一个jsfiddle，我们可以帮助你
我无法共享 Jsfiddle，因为我有很多本地 css 文件链接！

标签： jquery css twitter-bootstrap twitter-bootstrap-3 background-color

【解决方案1】：

使用这个 CSS 类

.table-striped tbody > tr:nth-child(2n+1) > td, .table-striped tbody > tr:nth-child(2n+1) > th {
    background-color: red !important;
    color: white !important;
}

希望这会奏效。

【讨论】：

这会为奇数行添加静态颜色。
我想通过 jQuery 使用 .addClass 方法来实现这一点
请添加一个 jsfiddle 以便我可以帮助你
我不能分享 Jsfiddle，因为我有很多本地 css 文件链接！！

【解决方案2】：

找到了一个有效的答案here：

向您的 CSS 添加一个类，该类专门覆盖条带化规则，并将其添加到您的其他 CSS 规则下。对于您的示例，这是标记。

table.table.table-striped tr.red-background td {
    background-color: red !important;
    color: white !important;
}

【讨论】：