自定义css被bootstrap 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 from bootstrap。
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;
}
我如何解决这个冲突并确保红色类取得presedence？ / p>
how can I resolve this conflict and assure that the red class takes presedence?
推荐答案
特异性
您的问题很可能与特异性有关。 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> tbody> 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> tbody> 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.
一般来说，除非你不想覆盖该规则，否则不要使用！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> tbody> tr> 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被bootstrap css覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
