自定义样式表不覆盖Bootstrap

Question

我尝试将我的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>

Fiddle的屏幕截图不起作用 ：

PS：可能是我使用CDN而不是自己托管它吗？ 到目前为止，这是我唯一的猜测。

小提琴

Answer 1

有三个因素会影响CSS中样式的覆盖。

首先是定义顺序，即

<style>
  h1 { font-size:18pt; }
</style>

<style>
  h1 { font-size:100pt; }
</style>

应用第二个h1定义，而不是第一个。

第二个是元素中包含的顺序。

<style>
  h1.smaller { font-size:18pt; }
  h1.bigger { font-size:100pt; }
</style>
...
<div class="smaller bigger"></div>
<div class="bigger smaller"></div>

类定义中包含的第一个样式被第二个样式覆盖...

第三是范围狭窄

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

第一个div.effect将在较小的填充和黑色背景下应用一般效果。

第二个div.effect将具有专门的效果。

根据您的目标，您可能需要创建具有更具体范围的类。

Answer 2

为什么只有三个下拉菜单是彩色的，而大酒吧却没有彩色？

您选择了错误的选择器，而不是选择#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>

自定义样式表不覆盖Bootstrap

问题描述

2 个解决方案

解决方案1
1 2016-07-02 00:13:33

首先是定义顺序，即

第二个是元素中包含的顺序。

第三是范围狭窄

解决方案2
1 已采纳 2016-07-02 00:56:07

自定义样式表不覆盖Bootstrap

问题描述

2 个解决方案

解决方案1 1 2016-07-02 00:13:33

首先是定义顺序，即

第二个是元素中包含的顺序。

第三是范围狭窄

解决方案2 1 已采纳 2016-07-02 00:56:07

解决方案1
1 2016-07-02 00:13:33

解决方案2
1 已采纳 2016-07-02 00:56:07