我使用CSS库时的主要问题是它们往往会覆盖我特别设置的自定义CSS样式。例如，在这里，我有一个存在于Bootstrap expand/collapse菜单中的列表：
<ul class="nav navbar-nav">
<li>
<a href="#" style=""><img src="images/arrow.gif" style="width: 20px;">Link A</a>
</li>
</ul>
我想设置自己的字体颜色，所以我使用以下CSS：
nav li {
font-size: 16px;
color: #004687;
}
但是当我在Firefox的检查器中查看时，我发现我选择的颜色被Bootstrap覆盖了。
我自定义的CSS出现在HTML文档的标签中加载Bootstrap文件之后。
如何防止这种情况发生，而不必为每个元素设置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>
编辑3：我发现一个便宜的解决方法，通过使用ID而不是类来实现，由于CSS的特殊性（ID优先于类），这种方法可行。虽然这并不是一个很干净的解决方案，但我仍然想知道为什么不能用自己的样式覆盖Bootstrap的类。