Html 从CSS库覆盖CSS（引导）_Html_Css_Twitter Bootstrap

Html 从CSS库覆盖CSS（引导）

html css twitter-bootstrap

Html 从CSS库覆盖CSS（引导）,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我使用CSS库的主要问题是，它们经常覆盖我专门设置的自定义CSS样式。例如，这里有一个列表，它位于引导展开/折叠菜单中： <ul class="nav navbar-nav"> <li> <a href="#" style=""><img src="images/arrow.gif" style="width: 20px;">Link A</a> </li> </ul> 但是当我在Fir

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

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

但是当我在Firefox的Inspector中查看时，我看到我选择的颜色被引导覆盖了

我的自定义CSS在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>


切换导航

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


#移动导航外部{
边框：1px实心#CCC；
背景色：#FFF；
}
#移动导航内{
边框：1px实心#CCC；
背景色：#FFF；
保证金：3倍；
}
李海军{
字体大小：16px；
颜色：#004687；
}
.nav移动链路{
字体大小：16px；
颜色：#004687；
}

编辑3:我发现了一个廉价的解决方法，使用ID而不是类，这是由于CSS的特殊性（ID的覆盖类）。这不是一个非常干净的解决方案，我仍然想知道为什么我不能用自己的类覆盖引导类。

尝试将自定义css文件放在Bootstrap.css下面

或

使用添加到列表中的其他类覆盖它：

<ul class="nav navbar-nav custom-class">
    <li>
        <a href="#" style=""><img src="images/arrow.gif" style="width: 20px;">Link A</a>
    </li>
</ul>

尝试使用nav li{字体大小：16px！重要；颜色：#004687！重要；}感谢您的建议，但问题仍然存在。您需要了解CSS的特殊性，这将回答你的问题：我猜你没有像我想的那样做，但是你使用的是和你写的一样的东西吗？因为你知道我们必须说nav是一个类，所以如果你没有这样写，请尝试一下。nav li{字体大小：16px！重要；颜色：#004687！重要；}

nav li {
  font-size: 16px !important;
  color: #004687 !important;
}

<ul class="nav navbar-nav custom-class">
    <li>
        <a href="#" style=""><img src="images/arrow.gif" style="width: 20px;">Link A</a>
    </li>
</ul>

.nav.custom-class li {
    font-size: 16px;
    color: #004687;
}