自定义 css 被引导 css 覆盖
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19768794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
custom css being overridden by bootstrap css
提问by mmilan
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"
我正在使用 Bootstrap 3，并且有一个表格显示了一些数据。在此表中，我应用了一些 javascript 进行条件格式设置，如果满足条件，我将元素的类设置为“红色”
.red {
background-color:red;
color:white;
}
the elements HTML is as follows:
元素 HTML 如下：
<td class="red">0</td>
I now have a conflict on odd rows the text color applies but the background color is overridden by the following css from bootstrap.
我现在在应用文本颜色的奇数行上发生冲突，但背景颜色被引导程序中的以下 css 覆盖。
.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?
我怎样才能解决这个冲突并确保红色类占据主导地位？
回答by Sean Ryan
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.
您的问题很可能与特异性有关。Chris Coyier 有一篇关于CSS 特异性的很棒的文章。我还建议您查看这个方便的特异性计算器。
Using that calculator, we can see that .table-striped > tbody > tr:nth-child(odd) > tdhas 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. .redis at 10, so that isn't going to cut it.
使用该计算器，我们可以看到它.table-striped > tbody > tr:nth-child(odd) > td的特异性为 23。因此，要覆盖它，任何新规则都需要具有等于或大于 23 的特异性。.red为 10，因此不会减少它。
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.redgives us a specificity of 33. As 33 is greater than 23, your rule should now work.
在这种情况下，它应该像匹配现有的特性一样简单，然后将您的类添加到其中。.table-striped > tbody > tr:nth-child(odd) > td.red给了我们 33 的特殊性。由于 33 大于 23，您的规则现在应该可以工作了。
See a working example here: http://bootply.com/91756
在此处查看一个工作示例：http: //bootply.com/91756
!important
！重要的
In general, you should never use !importantunless you never want that rule to be overridden. !importantis basically the nuclear option. I am moderately confident in saying that if you understand specificity, you should never need to !importantto make a custom rule work properly in a framework like Bootstrap.
一般来说，!important除非您不希望该规则被覆盖，否则您永远不应该使用。!important基本上是核选项。我很有信心地说，如果您了解特殊性，则永远不需要!important让自定义规则在像 Bootstrap 这样的框架中正常工作。
Update
更新
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
经过一番思考，我在这里提供的规则可能有点太具体了。如果要突出显示未剥离的表格上的单元格，会发生什么情况？为了使您的规则更具全局性，同时仍然具有足够的特异性以在剥离表中工作，我会使用.table > tbody > tr > td.red. 这与 Bootstrap 剥离具有相同的特异性，但也适用于未剥离斑马纹的表。更新的例子在这里：http: //bootply.com/91760
回答by JJ Rohrer
Firstly, read Sean Ryan's answer - it is very good and informative, but I had to tweak his answer enough before implementing in my code that I wanted have a distinct answer that might help the next person.
首先，阅读 Sean Ryan 的答案 - 它非常好且内容丰富，但是在我的代码中实施之前，我必须充分调整他的答案，我希望有一个明确的答案可以帮助下一个人。
I had almost the same question as the OP but also needed to be able to highlight the row, too. Below is how I enhanced(?) Sean Ryan's answer and turned it into my final implementation, which allows you to add a class to most any random element, including to a "tr" or a "td"
我有与 OP 几乎相同的问题，但也需要能够突出显示该行。下面是我如何增强（？）Sean Ryan 的答案并将其转化为我的最终实现，它允许您向大多数随机元素添加一个类，包括“tr”或“td”
See this on bootply.com
在bootply.com上看到这个
CSS
CSS
/* enable 'highlight' to be applied to most anything, including <tr> & <td>, including bootstrap's aggressive 'table-stripe'
see: http://stackoverflow.com/questions/19768794/custom-css-being-overridden-by-bootstrap-css
FYI: In the stack overflow question, the class is 'red' instead of 'highlight'
FYI: This is forked from http://www.bootply.com/91756
I used three different colors here for illustration, but we'd
likely want them to all be the same color.
*/
.highlight {
background-color: lightyellow;
}
/* supersede bootstrap at the row level by being annoyingly specific
*/
.table-striped > tbody > tr:nth-child(odd).highlight > td {
background-color: pink;
}
/* supersede bootstrap at the cell level by being annoyingly specific */
.table-striped > tbody > tr:nth-child(odd) > td.highlight {
background-color:lightgreen;
}
HTML
HTML
<table class="table table-striped">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1hi</td>
<td>hi</td>
<td>hi</td>
</tr>
<tr class="highlight">
<td>2hi</td>
<td>This row highlights fine since it was an even row to begin with, and therefore not highlighted by bootstrap</td>
<td>hi</td>
</tr>
<tr class="highlight">
<td>3hi</td>
<td>This whole row should be highlighted.</td>
<td>hi</td>
</tr>
<tr>
<td>4hi</td>
<td>hi</td>
<td>hi</td>
</tr><tr>
<td>5hi</td>
<td class="highlight">Just a specific cell to be highlighted</td>
<td>hi</td>
</tr>
</tbody>
</table>
回答by Andrew
You can add !importantafter each style in the .redclass. Adding !important basically will give the CSS more weight which allows you to override other styles.
您可以!important在.red类中的每个样式之后添加。添加 !important 基本上会给 CSS 更大的权重，从而允许您覆盖其他样式。
Your css would look like:
你的 css 看起来像：
.red {
background-color: red !important;
color: white !important;
}
回答by Stefan
Use
用
.table-striped > tbody > tr:nth-child(odd) > td.red {
background-color:red;
color:white;
}
to create more specific selector, or the !important keyword (as shown by Andrew)
创建更具体的选择器，或 !important 关键字（如 Andrew 所示）
Alternitvaly, and probably best, you can create a custom bootstrap configuration, which not includes table styling (Uncheck Tables in Common CSS)
或者，可能是最好的，您可以创建自定义引导程序配置，其中不包括表格样式（取消选中常用 CSS 中的表格）
回答by Ishan Jain
You need to apply !importantafter class style. because we use the selector is .table-striped > tbody > tr:nth-child(odd) > td, which is more specific than the class rule and will take precedence. So you need to override this with !important.
你需要申请!important课后风格。因为我们使用了选择器 is .table-striped > tbody > tr:nth-child(odd) > td，它比类规则更具体并且优先。所以你需要用!important.
But there are two ways to fix this:
但是有两种方法可以解决这个问题：
Use
!importantto make a rule more "important". I'd avoid doing this because it is confusing when you have lots of rules spread out over several files.Use a higher-specifity selector for the td you want to modify. You can add an id and this will allow you to supersede the rule from the linked CSS file.
使用
!important做出更规则的“重要”。我会避免这样做，因为当您将大量规则分布在多个文件中时，这会令人困惑。对要修改的 td 使用更高特异性的选择器。您可以添加一个 id，这将允许您从链接的 CSS 文件中取代规则。
回答by Ishan Jain
You can apply a value of !importantafter the value you want to take precedence.
您可以!important在要优先的值之后应用一个值。
回答by Matthew Trow
Would it not be a solution that instead of applying a class, append css to the element?
不是应用类，而是将 css 附加到元素，这不是一个解决方案吗？
