Question

我已经尝试将我的CSS文件链接放在Bootstrap CDN链接下面（就像现在一样）尽可能具体（甚至放background: #ffcc00;而不是background-color: #ffcc00;，因为我读到应该工作的地方！）

＆＃13;

.active {
    background-color: #FF8040;
    color: white;
}

.navbar #myNavbar {
    background: #ffcc00;
}

＆＃13;

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

＆＃13;

小提琴无效的屏幕截图：

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

Fiddle

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

＆＃13;

.active {
  background-color: #FF8040;
  color: white;
}
.navbar-header {
  background: #fc0;
}

＆＃13;

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

＆＃13;

自定义样式表不会覆盖Bootstrap

2 个答案:

第一个是定义顺序，即

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

第三是范围狭窄