html - 如何克服 Bootstrap 的默认样式？元素定位问题？

Question

我一直在使用 Bootstrap 重建我的网站，以便在我自己设计一些更强大的东西的同时快速建立原型(prototype)。在覆盖默认样式方面，事实证明它比它的值(value)更麻烦。

网址是here如果您需要它作为引用。

我正在尝试将“主页”链接的背景色设为白色。我已经成功地设计了其他 navbar 链接的样式。

这是我用来定位的 CSS 类型的示例(我认为这里没有问题):

.white-back, #home {
    background-color: white;
}

HTML:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active" id="home"><a href="http://kennethfrancis.com">Home</a></li>
      </ul>
    </div>
  </div>
</nav>

我试过在 li.active 和包含的 a 上放置一个 ID。当我将 li.active > a 的背景颜色设置为白色时，它不起作用。我什至尝试使用 !important。我在这里缺少什么吗？根据 Firebug 检查员所说的对象，我用几种不同的方式进行了攻击。

现在，看着它周围的一切都被剥离，让我觉得我已经对 nested-div 疯狂了。我可以去掉其中的任何一个并保持页面的结构吗？

如果有人可以提供有关如何克服此类元素定位/覆盖问题的任何链接，那就太好了。任何相关的内容。

Answer 1

如果您使用类，则需要确保您的 CSS 更具体才能应用。所以 li.active a 不会工作，因为它会被默认的 Bootstrap 类覆盖，因为它比您的样式更具体。

你需要像下面的代码一样定位它才能工作

.navbar-default .navbar-nav>.active>a {
  background: #fff;
}

如果你为 li 使用 id #home，那么你可以使用

#home a {
  background: #fff;
}

希望对你有帮助