从 CSS 库中覆盖 CSS (Bootstrap)

Joh*_*ith 5 html css twitter-bootstrap

我使用 CSS 库的主要问题是它们经常覆盖我专门设置的自定义 CSS 样式。例如,这里我有一个存在于 Bootstrap 展开/折叠菜单中的列表:

<ul class="nav navbar-nav">
   <li>
      <a href="#" style=""><img src="images/arrow.gif" style="width: 20px;">Link A</a>
   </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我想设置我自己的字体颜色,所以我使用以下 CSS:

nav li {
  font-size: 16px;
  color: #004687;
}
Run Code Online (Sandbox Code Playgroud)

但是当我在 Firefox 的 Inspector 中查看时,我看到我选择的颜色被 Bootstrap 覆盖。

我的自定义 CSSBootstrap 文件加载到 HTML 文档之后发生。

如何在不设置style="color: #004687"每个元素的情况下防止这种情况发生?

编辑:感谢迄今为止的建议,但没有一个成功。我正在粘贴完整的原始代码,以便为您提供更多详细信息:

<div class="container">
    <header class="navbar navbar-static-top bs-docs-nav">
      <div class="col-md-4 visible-xs" id="mobile-nav-outer">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          <a href="../" class="navbar-brand">Menu</a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" id="mobile-nav-inner" role="navigation">
          <ul class="nav navbar-nav">
            <li>
              <a href="#" class="nav-mobile-link"><img src="images/arrow.gif" style="width: 20px;">Link A</a>
            </li>
          </ul>

        </nav>
      </div>
  </header>
</div>
Run Code Online (Sandbox Code Playgroud)

我的 CSS 包含如下:

  <head>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/css/docs.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <style type="text/css">
        #mobile-nav-outer {
          border: 1px solid #CCC;
          background-color: #FFF;
        }
        #mobile-nav-inner {
          border: 1px solid #CCC;
          background-color: #FFF;
          margin: 3px;
        }
        nav li {
            font-size: 16px;
            color: #004687;
        }
        .nav-mobile-link {
            font-size: 16px;
            color: #004687;        
        }
    </style>
  </head>
Run Code Online (Sandbox Code Playgroud)

编辑 3: 我找到了一种廉价的解决方法,即使用 ID 而不是由于 CSS 特异性(ID 的覆盖类)而起作用的类。这不是一个非常干净的解决方案,我仍然想知道为什么我不能用自己的类覆盖 Bootstrap 类。

bek*_*ekt 0

尝试将自定义 css 文件放置在 bootstrap.css 下方。

或者

nav li {
  font-size: 16px !important;
  color: #004687 !important;
}
Run Code Online (Sandbox Code Playgroud)