我使用 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>
我想设置自己的字体颜色，所以我使用了下面的 CSS:
nav li {
font-size: 16px;
color: #004687;
}
但是当我在 Firefox 的检查器中查看时，我发现我选择的颜色被 Bootstrap 覆盖了。
我的自定义 CSS 发生在 Bootstrap 文件已加载到 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>
编辑 3: 我找到了一种廉价的解决方法，即使用 ID 而不是由于 CSS 特异性(ID 覆盖类)而起作用的类。这不是一个非常干净的解决方案，我仍然想知道为什么我不能用自己的类覆盖 Bootstrap 类。
最佳答案
用添加到列表中的其他类覆盖它:
<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;
}
关于html - 从 CSS 库(Bootstrap)覆盖 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24011804/