自定义 css 被引导程序 css 覆盖 [英] custom css being overridden by bootstrap css

问题描述

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

I am using Bootstrap 3 and I have a table showing some data. in this table I have applied some javascript for conditional formatting, in the event that a condition is met, I set the element's class to "red"

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

元素HTML如下:

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

我现在在应用文本颜色的奇数行上发生冲突，但背景颜色被引导程序中的以下 css 覆盖.

I now have a conflict on odd rows the text color applies but the background color is overridden by the following css from bootstrap.

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

我如何解决这个冲突并确保红色类优先?

how can I resolve this conflict and assure that the red class takes presedence?

推荐答案

Specificity

您的问题很可能与特异性有关.Chris Coyier 有一篇关于 CSS 特异性的精彩文章.我还建议您查看这个方便的特异性计算器.

Specificity

Your issue is most likely regarding specificity. Chris Coyier has a great article on CSS specificity. I would also suggest you check out this handy specificity calculator.

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

Using that calculator, we can see that .table-striped > tbody > tr:nth-child(odd) > td has a specificity of 23. As such, to override that, any new rule needs to have a specificity of something equal to or greater than 23. .red is at 10, so that isn't going to cut it.

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

In this case, it should be as simple as matching the existing specificity, and then adding your class to it. .table-striped > tbody > tr:nth-child(odd) > td.red gives us a specificity of 33. As 33 is greater than 23, your rule should now work.

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

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

In general, you should never use !important unless you never want that rule to be overridden. !important is basically the nuclear option. I am moderately confident in saying that if you understand specificity, you should never need to !important to make a custom rule work properly in a framework like Bootstrap.

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

After a bit of thought, the rule I provide here is probably a bit too specific. What happens if you want to higlight a cell on a table that isn't stripped? To make your rule a bit more global while still having enough specificity to work in stripped tables, I would go with .table > tbody > tr > td.red. This has the same specificity as the Bootstrap stripping, but will also work on tables that are not zebra stripped. Updated example is here: http://bootply.com/91760

这篇关于自定义 css 被引导程序 css 覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！