2

我在 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 推翻了我的颜色定义吗？

4

2 回答 2

3

标记中唯一可以直观地应用此样式的元素是<a>，并且该元素具有许多由 Twitter Bootstrap 应用到的非常具体的 CSS 规则，如下所示：

.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）无关。

于 2012-05-13T22:02:38.773 回答
0

您在 -Tag 上定义红色<li>，但没有文本。文本在<a>-Tag 内，因此您需要覆盖此规则。

代码如下：

.red a {
    color: #d14;
}

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

于 2012-05-13T21:58:10.253 回答