html - 导航栏不会改变颜色。更正了 html 和 css 标记。没有效果

Question

您好，我的网站上有一个导航栏。但是字体是橙色的，悬停...是白色的。

我想要白色字体和紫色背景。我似乎无法覆盖 bootstrap.css，即使我的 style.css 在 bootstrap.css 之下。我什至尝试用 #000000 填充 .nav 栏中的每种颜色；看看会发生什么并注释掉...没有效果!

唯一改变的是边距。最初问题是我的 html 标记..但我已经更正了它..但是问题仍然存在。字体是橙色的，但我不知道它是如何变成橙色的，因为我查看了 style.css 和 bootstrap.css。

帮助将不胜感激。 谢谢

index.html

<!-- HEADER AND NAVBAR -->
<header>
  <div class="wrap">
    <!-- logo -->
    <ng-controller="demoCtrl">
      <ul class="nav nav-pills pull-right">
        <li ng-class="{active: isState('home') }">
          <a ui-sref="home">HOME</a>
        </li>
        <li ng-class="{active: isState('form') }">
          <a ui-sref="form">CANDIDATES</a>
        </li>
        <li ng-class="{active: isState('clients') }">
          <a ui-sref="clients">CLIENTS</a>
        </li>
        <li ng-class="{active: isState('aboutus') }">
          <a ui-sref="aboutus">ABOUT US</a>
        </li>

        <li ng-class="{active: isState('training') }">
          <a ui-sref="training">TRAINING</a>
        </li>
      </ul>
      <h3 class="text-muted">          </h3>
      <br>
  </div>
</header>

样式.css

/* general settings */
html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  width: 100%;
  background-color: #000;
}
body {
  background-color: 000;
  font-family: "Verdana", sans-serif;
  color: #c4c4c4;
  font-size: 16.0px;
  line-height: 1.19em;
  color: #000;
  font-weight: 100;
  margin: 0px;
  min-height: 100%;
  width: 100%;
}
* {
  font-family: Verdana;
}
a {
  text-decoration: none;
}
a img {
  border: none;
}
h1 {
  font-size: 3.5em;
  font-weight: 100;
  font-family: "Verdana", sans-serif;
  color: #c4c4c4;
  font-size: 16.0px;
  line-height: 1.19em;
}
p {
  font-size: 1.5em;
}
/*input,textarea {
      -webkit-appearance:none;
      background-color:#f7f7f7;
      border:none;
      border-radius:3px;
      font-size:1em;
      font-weight:100;
    }
    */


header {
  height: 110px;
}
header .wrap {
  height: 100%;
}
header .logo {
  margin-top: 10px;
  width: 300px;
  height: 100px;
}
header nav {
  float: right;
  margin-top: 17px;
}
header .nav ul {
  margin: 1em 0;
  padding: 0;
}
header nav ul li {
  display: block;
  float: left;
  margin-right: 20px;
}
header nav ul li a {
  border-radius: px;
  color: #000000;
  font-size: 1.4em;
  font-weight: 400;
  padding: 10px 27px;
  text-decoration: none;
  background: ##1bbeb7;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
}
}
header nav ul li a.active {
  background-color: #000000;
  color: #000000;
}
header nav ul li a.active:hover {
  background: #000000;
  color: #000000;
}
header nav ul li a:hover,
header nav ul li a.activeSmall {
  color: #000000;
  background: #000000;
}

Answer 1

我不会抛出你所有的代码，因为它很不清楚，但要在基本 Bootstrap 上覆盖这些样式，你只需要这个:

.nav {
  background: purple;
  color: orange;
}
.nav>li>a {
  color: orange;
}
.nav-pills>li>a:hover {
  color: white;
  background: transparent;
  cursor: pointer;
}

BootplyDemo