我使用的是Bootstrap 3，我有一个表显示一些数据。在这个表中，我已经为条件格式化应用了一些javascript，如果满足条件，我将元素的类设置为“红色”
.red {
background-color:red;
color:white;
}
元素HTML如下：
<td class="red">0</td>
我现在在文本颜色应用的奇数行上有冲突，但背景颜色被引导程序中的以下css覆盖。
.table-striped > tbody > tr:nth-child(odd) > td,.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
我如何解决这个冲突呢，并确保红色阶级得到尊重？
解决方法
特异性
您的问题最有可能是关于特异性。 Chris Coyier在CSS specificity上有一篇很棒的文章。我也建议您检查这个方便的specificity calculator。
使用该计算器，我们可以看到.table-striped> tbody> tr：nth-child(odd)> td具有23的特殊性。因此，为了超越这一点，任何新的规则都需要具有等于或大于23.的等价物的特异性.red是10，所以不会削减它。
在这种情况下，它应该与匹配现有的特性一样简单，然后将类添加到它。 。条纹> tbody> tr：nth-child(odd)> td.red给了我们33的特异性。由于33大于23，你的规则现在应该有效。
见这里的一个工作示例：http://bootply.com/91756
！重要
一般来说，除非你永远不希望该规则被覆盖，否则绝对不应该使用！重要的是核选择。我自信地说，如果你明白具体性，你不应该需要！重要的是使自定义规则在像Bootstrap这样的框架中正常工作。
更新
经过一番思考，我在这里提供的规则可能有点太具体了。如果您想要高清一个没有剥离的表格上的单元格，会发生什么？为了使您的规则更全面，同时仍然具有足够的特异性在剥离表中工作，我将与.table> tbody> tr> td.red。这与Bootstrap剥离具有相同的特异性，但也可以用于没有斑马剥离的表。更新例如：http://bootply.com/91760
