CSS - Twitter Bootstrap 的红色字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10575547/
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
CSS - red font to Twitter Bootstrap
提问by Thomas Kremmel
I have defined a class in my main.css file.
我在 main.css 文件中定义了一个类。
.red {
color: #d14;
}
And using it like this.
并像这样使用它。
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active red">
<a href="/admin/list"><i class="icon-leaf icon-white"></i>Admin</a>
</li>
</ul>
</div>
</div>
Besides my main.css I also import the twitter bootstrap css file.
除了我的 main.css 我还导入了 twitter bootstrap css 文件。
This way it does not work. Is it because Bootstrap is overruling my color definition?
这样就行不通了。是因为 Bootstrap 否决了我的颜色定义吗？
回答by Wesley Murch
The only element in your markup that could visually apply this style is the <a>, and that element has a lot of really specific CSS rules applied to it by Twitter Bootstrap, stuff like this:
标记中唯一可以在视觉上应用此样式的<a>元素是，并且该元素具有许多由 Twitter Bootstrap 应用的非常具体的 CSS 规则，如下所示：
.navbar .nav .active > a,
.navbar .nav .active > a:hover {
color:#FFFFFF;
}
You'll have to write something even more specific to get the style to apply:
您必须编写更具体的内容才能应用该样式：
.navbar .navbar-inner .nav .red a {
color: #d14;
}
Demo: http://jsfiddle.net/pYGaG/
演示：http: //jsfiddle.net/pYGaG/
You coulduse !importanton the rule if you really had to, but I really feel that you should avoid it as much as possible. If this is a single element that has this style, consider adding an idto it, which carries a lot of weight specificity-wise:
如果你真的必须，你可以使用!important规则，但我真的觉得你应该尽可能地避免它。如果这是具有这种样式的单个元素，请考虑id向其添加，它具有很多权重特异性：
<li class="active" id="home_link">
<a href="/admin/list"><i class="icon-leaf icon-white"></i>Admin</a>
</li>
#home_link a {
color: #d14;
}
Here are a couple good articles on CSS specificity:
这里有几篇关于 CSS 特异性的好文章：
- http://css-tricks.com/specifics-on-css-specificity/
- http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
- http://css-tricks.com/specifics-on-css-specificity/
- http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
And as a side note, try to avoid presentational class names like red. Use more meaningful ones that aren't tied to the way it should look, but what it is(for example, .active-link).
作为旁注，尽量避免像red. 使用更有意义的那些不依赖于它应该看起来的方式，而是它是什么（例如，.active-link）。
回答by Johannes Klau?
Your're defining the red color on a <li>-Tag, but there is no text. The text is inside the <a>-Tag, so you need to overwrite this rule.
您在 -Tag 上定义红色<li>，但没有文字。文本在<a>-Tag 内，因此您需要覆盖此规则。
Code something like this:
代码如下：
.red a {
color: #d14;
}
Update:Go for the answer given by Wesley Murch.
更新：寻找 Wesley Murch 给出的答案。
