css - 自定义 css 被 bootstrap css 覆盖

Question

我正在使用 Bootstrap 3，我有一个显示一些数据的表格。在此表中，我应用了一些 javascript 进行条件格式化，如果满足条件，我将元素的类设置为“红色”

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

元素HTML如下:

<td class="red">0</td>

我现在在应用文本颜色的奇数行上发生冲突，但背景颜色被来自 Bootstrap 的以下 css 覆盖。

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

我怎样才能解决这个冲突并确保红类占上风？

Answer 1

特异性

您的问题很可能与特异性有关。 Chris Coyier 在 CSS specificity 上发表了一篇很棒的文章.我还建议您查看这个方便的 specificity calculator .

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

在这种情况下，它应该像匹配现有的特异性一样简单，然后将您的类添加到其中。 .table-striped > tbody > tr:nth-child(odd) > td.red 为我们提供了 33 的特异性。由于 33 大于 23，您的规则现在应该有效。

请在此处查看工作示例:http://bootply.com/91756

!重要

一般来说，你不应该使用 !important 除非你不希望那个规则被覆盖。 !important 基本上是核选项。我相当有信心地说，如果您了解特异性，您永远不需要 !important 来使自定义规则在像 Bootstrap 这样的框架中正常工作。

更新

经过一番思考，我在这里提供的规则可能有点太具体了。如果要突出显示未剥离的表格上的单元格，会发生什么情况？为了使您的规则更加全局化，同时仍然具有足够的特异性以在剥离表中工作，我会选择 .table > tbody > tr > td.red。这与 Bootstrap 剥离具有相同的特异性，但也适用于未剥离斑马纹的表格。更新的例子在这里:http://bootply.com/91760