Question

我在main.css文件中定义了一个类。

.red {
  color: #d14;
}

并像这样使用它。

<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>

除了我的main.css之外，我还导入了twitter bootstrap css文件。

这种方式不起作用。是因为Bootstrap正在推翻我的颜色定义吗？

Answer 1

标记中可以直观地应用此样式的唯一元素是<a>，该元素有很多特定的CSS规则由Twitter Bootstrap应用于它，如下所示：

.navbar .nav .active > a,
.navbar .nav .active > a:hover {
    color:#FFFFFF;
}

你必须写一些更具体的东西来获得适用的风格：

.navbar .navbar-inner .nav .red a {
  color: #d14;
}

演示：http://jsfiddle.net/pYGaG/

如果你真的需要，你可以在规则上使用!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;
}

http://jsfiddle.net/pYGaG/1/

以下是一些关于CSS特异性的好文章：

作为旁注，尽量避免像red这样的表达类名。使用与其外观不相关的更有意义的内容，但的内容（例如，.active-link）。

Answer 2

您在<li> - 标签上定义红色，但没有文字。该文本位于<a> - 标记内，因此您需要覆盖此规则。

代码如下：

.red a {
    color: #d14;
}

更新：寻找Wesley Murch给出的答案。

CSS - 红色字体到Twitter Bootstrap

2 个答案: