自定义CSS被引导CSS覆盖

Question

我正在使用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;
}

我该如何解决此冲突并确保红色阶级有上风？

Answer 1

您的问题很可能与特异性有关。克里斯·科耶尔（ChrisCoyier）撰写了一篇有关CSS特异性的精彩文章。我也建议您检查一下这个方便的特异性计算器。

使用该计算器，我们可以看到其.table-striped > tbody > tr:nth-child(odd) > td特异性为23。要覆盖这一点，任何新规则都必须具有等于或大于23的特异性，.red即为10，这样就不会削减它。

在这种情况下，它应该简单到匹配现有的特定性，然后向其添加类。.table-striped > tbody > tr:nth-child(odd) > td.red给我们指定了33的特异性。当33大于23时，您的规则现在应该起作用了。

！重要

通常，!important除非您永远不要覆盖该规则，否则永远不要使用。!important基本上是核选择。我有一定的信心地说，如果您了解特定性，则永远不需要!important使自定义规则在Bootstrap之类的html" target="_blank">框架中正常工作。

更新资料

经过一番思考，我在这里提供的规则可能太具体了。如果要对未剥离的桌子上的单元格进行高光显示会怎样？为了使您的规则更具全局性，同时又有足够的特异性可以在剥离表中使用，我将使用`.table

tbody > tr >td.red`。这具有与Bootstrap剥离相同的特异性，但也可以在未斑马剥离的表上使用。