自定义样式表不覆盖Bootstrap
[英]Custom Stylesheet not overriding Bootstrap
问题描述
I've tried putting my CSS file link below the Bootstrap CDN link (as it is now) to being as specific as I can (even putting background: #ffcc00; instead of background-color: #ffcc00; , because I read somewhere that was supposed to work!) 
我尝试将我的CSS文件链接放在Bootstrap CDN链接下方（就目前而言），使其尽可能具体（甚至将background: #ffcc00;而不是background-color: #ffcc00;因为我在某处读到了应该可以工作！）
.active { background-color: #FF8040; color: white; } .navbar #myNavbar { background: #ffcc00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="container-fluid"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">Play Games 3.0</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="index.html">Home</a></li> <li class="active"><a href="topgames.html">Top Games</a></li> <li><a href="gamelist.html">Game List</a></li> <li><a href="vote.html">Vote For Games</a></li> </ul> </div> </nav> </div> <h1>Welcome to Play Games 3.0!</h1> <p>You can use the navigation bar above or choose your favorite game from the categories below!</p> </body>
Screenshot of Fiddle not working : Fiddle的屏幕截图不起作用 ：
PS: Could it possibly be due to me using a CDN instead of hosting it myself? PS：可能是我使用CDN而不是自己托管它吗？ That's my only guess so far. 到目前为止，这是我唯一的猜测。
2 个解决方案
解决方案1
1 2016-07-02 00:13:33
There are three factors which affect the overriding of styles in CSS. 有三个因素会影响CSS中样式的覆盖。
The first is order of definition, ie 首先是定义顺序，即
<style>
h1 { font-size:18pt; }
</style>
<style>
h1 { font-size:100pt; }
</style>
The second h1 definition, having come after the first is applied instead of the first. 应用第二个h1定义，而不是第一个。
The second is order included in the element. 第二个是元素中包含的顺序。
<style>
h1.smaller { font-size:18pt; }
h1.bigger { font-size:100pt; }
</style>
...
<div class="smaller bigger"></div>
<div class="bigger smaller"></div>
The first style included in the class definition is overriden by the second... 类定义中包含的第一个样式被第二个样式覆盖...
The third is narrowness of scope 第三是范围狭窄
<style>
div.effect { padding:5px; background: #000; }
div > div > div.effect { padding:20px; background:#FFF; }
</style>
<div class="effect"></div>
<div><div><div class="effect"></div></div></div>
The first div.effect would have the general effect applied with a small padding and black background. 第一个div.effect将在较小的填充和黑色背景下应用一般效果。
The second div.effect would have the specialized effect applied to it. 第二个div.effect将具有专门的效果。
Depending on your goals, you may need to create classes with more specific scope. 根据您的目标，您可能需要创建具有更具体范围的类。
解决方案2
1 已采纳 2016-07-02 00:56:07
why is only three of the drop downs colored, and the big bar not colored????
you are selecting the wrong selector, instead of selection #myNavBar you want to select/target the .navbar-header 您选择了错误的选择器，而不是选择#myNavBar而是要选择/定位.navbar-header
.active { background-color: #FF8040; color: white; } .navbar-header { background: #fc0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">Play Games 3.0</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="index.html">Home</a> </li> <li class="active"><a href="topgames.html">Top Games</a> </li> <li><a href="gamelist.html">Game List</a> </li> <li><a href="vote.html">Vote For Games</a> </li> </ul> </div> </nav> </div> <h1>Welcome to Play Games 3.0!</h1> <p>You can use the navigation bar above or choose your favorite game from the categories below!</p>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.