无法更改导航栏颜色也无法覆盖 bootstrap.css

Question

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

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

/* 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;
}
*/


/*input:focus,textarea:focus {
  border:none;
  outline:2px solid #7ed7b9;
}*/
.left {
  float:left;
}
.right {
  float:right;
}
/*.btn {
  background-color:#cecece;
  border-radius:10px;
  color:#000000;
  display:block;
  font-size:1.4em;
  font-weight:400;
  margin:30px 30px;
  padding:10px 30px;
  font-family:"Verdana", sans-serif;
}
.btn:hover {
  opacity:0.10;
}*/





















.btn {
        color: #fef4e9;
        border: solid 1px #da7c0c;
        background: #f78d1d;
        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
        background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.btn:hover {
        background: #f47c20;
        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
        background: -moz-linear-gradient(top,  #f88e11,  #f06015);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.btn:active {
        color: #fcd3a5;
        background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
        background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}




.wrap {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  margin:0 auto;
  max-width:1420px;
  overflow:hidden;
  padding:0 0px;
  position:relative;
  width:100%;
}
.wrap:before {
  content:'';
  display:inline-block;
  height:100%;
  margin-right:-0.25em;
  vertical-align:middle;
}
/* header section------------------------------------------------------------------------- */
 header {
  height:110px;
}
header .wrap {
  height:100%;
}
header .logo {
  margin-top:10px;
 width:300px;
 height: 100px;
}


h7 {
    text-align: right;
color:#cecece
}















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;

}

/* other objects */ .projectObj {
  color:#fff;
  display:block;
}
.projectObj .name {
  float:left;
  font-size:4em;
  font-weight:100;
  position:absolute;
  width:42%;
}
/*.projectObj .img {
  float:right;
  margin-bottom:5%;
  margin-top:5%;
  width:30%;
}*/
.paddRow {
  background-color:#dadada;
  color:#818181;
  display:none;
  padding-bottom:10px;
}
.paddRow.aboutRow {
  background-color:#CCCCCC;
  color:#FFF !important;
  display:block;
  font-family:"Verdana", sans-serif; font-size:13.0px; line-height:1.25em;


}
.paddRow .head {
  font-family:"Verdana", sans-serif; font-size:16.0px; line-height:1.25em;
  margin:40px 0;
}
.paddRow .close {
  cursor:pointer;
  position:absolute;
  right:50px;
  top:80px;
  width:38px;
}
.about {
  color:#818181;
    font-family:"Verdana", sans-serif; color:#c4c4c4; font-size:16.0px; line-height:1.25em;

}
.about section {
  margin:0 0 10%;
}
.about .head {
  font-size:4em;
  font-weight:100;
  margin:3% 0;
  font-family:"Verdana", sans-serif; color:#5b5b5b; font-size:16.0px; line-height:1.25em;
}
.about .subHead {
  font-size:2.5em;
  font-weight:100;
  margin:0 0 3%;
}
.about .txt {
  width:60%;
  color:#686868;
}
.about .image {
  width:30%;
}
.about .flLeft {
  float:left;
}
.about .flRight {
  float:right;
}

.image {
  text-align:center;
}
.image img {
  vertical-align:top;
  width:100%;
}

.input {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  margin:1% 0;
  padding:12px 14px;
  width:47%;
}



button {
  border:none;
  cursor:pointer;
}
/*.textarea {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  height:200px;
  margin:1% 0;
  overflow:auto;
  padding:12px 14px;
  resize:none;
  width:100%;
}*/
::-webkit-input-placeholder {
  color:#a7a7a7;
}
:-moz-placeholder {
  color:#a7a7a7;
}
::-moz-placeholder { /* FF18+ */
  color:#a7a7a7;
}
:-ms-input-placeholder {
  color:#a7a7a7;
}
.loader {
  -moz-animation:loader_rot 1.3s linear infinite;
  -o-animation:loader_rot 1.3s linear infinite;
  -webkit-animation:loader_rot 1.3s linear infinite;
  animation:loader_rot 1.3s linear infinite;
  height:80px;
  width:80px;
}
@-moz-keyframes loader_rot {
  from {
    -moz-transform:rotate(0deg);
  }
  to {
    -moz-transform:rotate(360deg);
  }
}
@-webkit-keyframes loader_rot {
  from {
    -webkit-transform:rotate(0deg);
  }
  to {
    -webkit-transform:rotate(360deg);
  }
}
@keyframes loader_rot {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}
.view-enter,.view-leave {
  -moz-transition:all .5s;
  -o-transition:all .5s;
  -webkit-transition:all .5s;
  transition:all .5s;
}
.view-enter {
  left:20px;
  opacity:0;
  position:absolute;
  top:0;
}
.view-enter.view-enter-active {
  left:0;
  opacity:1;
}
.view-leave {
  left:0;
  opacity:1;
  position:absolute;
  top:0;
}
.view-leave.view-leave-active {
  left:-20px;
  opacity:0;
}
/* responsive rules */ @media (max-width: 1200px) {
    body {
      font-size:90%;
    }
    h1 {
      font-size:4.3em;
    }
    p {
      font-size:1.3em;
    }
    header {
      height:80px;
    }
    header .logo {
      margin-top:12px;
      width:200px;
    }
    header nav {
      margin-top:11px;
    }
    header nav ul li {
      margin-right:12px;
    }
    header nav ul li a {
      border-radius:23px;
      font-size: 1.3em;
      padding:10px 12px;
    }
    .wrap {
      padding:0 30px;
    }
    .paddRow .close {
      right:30px;
    }
}
@media (max-width: 900px) {
    .contactForm {
      width:100%;
    }
}
@media (max-width: 768px) {
    body {
      font-size:80%;
      margin:0;
    }
    h1 {
      font-size:5em;
          font-color:
    }
    header {
      height:70px;
    }
    header .logo {
      margin-top:20px;
      width:70px;
    }
    header nav {
      margin-top:8px;
    }
    header nav ul li {
      margin-right:5px;
    }
    header nav ul li a {
      border-radius:20px;
      font-size:1.1em;
      padding:8px;
    }
    .wrap {
      padding:0 15px;
    }
    .projectObj .name {
      font-size:3em;
    }
    .paddRow {
      padding-bottom:30px;
    }
    .paddRow .head {
      font-size:3em;
      margin:30px 0;
    }
    .paddRow .close {
      right:20px;
      top:60px;
      width:30px;
    }
    .projectHead .picture {
      width:67%;
    }
    .projectHead .picture.right {
      margin-right:16.5%;
    }
    .projectHead .text {
      position:static;
      width:100%;
    }
    .projectHead .centerText {
      width:70%;
    }
    .view-enter,.view-leave {
      -webkit-transform:translate3d(0,0,0);
      transform:translate3d(0,0,0);
    }
}
@media (max-width: 480px) {
    body {
      font-size:70%;
      margin:0;
    }
    header {
      height:50px;
    }
    header .logo {
      display:none;
    }
    header nav {
      margin-top:3px;
    }
    header nav ul li {
      margin-right:3px;
    }
    header nav ul li a {
      border-radius:20px;
      font-size:1.3em;
      padding:5px 14px;
    }
    .wrap {
      padding:0 10px;
    }
    .paddRow {
      padding-bottom:20px;
    }
    .paddRow .head {
      margin:20px 0;
    }
    .paddRow .close {
      right:10px;
      top:45px;
      width:20px;
    }
    .about .image {
      margin:10% auto;
      width:60%;
    }
    .about .abIcon {
      display:inline;
    }
    .projectHead .centerText {
      width:90%;
    }
    .about .txt,.input {
      width:100%;
    }
    .about .flLeft,.about .flRight,.input.email {
      float:none;
    }
}
* { margin: 0;
}
html, body { height: 100%;
}
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em;
}
.footer, .push { height: 4em;
}
ul.a {
    list-style-type: circle;
}









* {
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: 'zocial', sans-serif;
}
/*[data-icon]:before {
    font-family: 'zocial';
    content: attr(data-icon);
    -webkit-font-smoothing: antialiased;
}*/
body {
    font-family: 'Verdana', sans-serif;
}

a {
    text-decoration: none;

    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition:  all .2s linear;
    transition: all .2s linear;
}
.clear {
    clear: both;
}






footer {
 /* background-color: #212121;*/
}
/*#footer{

background-image: img src="img/footback.png";
  /*position: relative;
    z-index: 1;
}*/




contact {

   background-color: ;
   position: relative;
   z-index: 1;
}
contact > ul li .text {
    color: #000000;
    font-size: 13px;
    line-height: 20px;
    margin-left: 105px;
    position: relative;
    text-align: justify;
}





/*-----------------------------------------------------------------Footer styles------------------------------------*/


footer .splitter {
   /* background-color: #ac0;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
        to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
*/
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
    background-color: #450045;
    -moz-box-shadow: 1px 1px 8px gray;
    -webkit-box-shadow: 1px 1px 8px gray;
    box-shadow: 1px 1px 8px gray;

    height: 10px;
}






/*footer > ul {
    list-style: none outside none;
    margin top: 10px auto;
    max-width: 1200px;
    overflow: hidden;
    padding: 25px 0;
    position: relative;
    width: 95%;
}*/
footer > ul li {
    float: left;
    padding: 20px 15px;
    width: 33.3%;

    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
footer > ul li:first-child {
    padding-left: 0;
}
footer > ul li:nth-child(3) {
    padding-right: 0;
}
footer > ul li .icon {
    color: #999999;
    float: left;
    font-size: 80px;
    line-height: 80px;
}
footer > ul li .text {
    color: #FFFFFF;
    font-size: 13px;
    line-height: 20px;
    margin-left: 105px;
    position: relative;
    text-align: justify;
}
.text h4 {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}




.text h5 {
    color: #6c6c6c;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.text a {
    border-bottom: 1px dotted transparent;
    color: #FFDD00;
    font-weight: bold;
}
.text a:hover {
    border-color: #FFDD00;
}



/*footer .bar {
    background-color: #ffffff;
    padding: 20px 0;
}
footer .bar-wrap {
    font-size: 12px;
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    width: 95%;
}*/
.links {
    float: left;
    margin-left: 30px;
    list-style: none outside none;
    position: relative;
}
.links li {
    float: left;
    margin-right: 10px;
}
.links a {
    color: #778888;
}
.links a:hover {
    color: #FFFFFF;
}

.clearFinance {
    color: #2D3739;
    margin-top: 5px;
}




@media screen and (max-width: 1000px){
    .links, .social, .copyright{
        float:none;
        text-align:center;
    }

    .links li {
        display:inline-block;
        float:none;
    }
    .bar {
        position:relative;
    }
    .bar-wrap {
        margin-bottom:0;
    }
}

@media screen and (max-width: 835px)  {
    footer > ul li {
        float:none;
        width:auto;
    }
}

@media screen and (max-width: 768px)  {
    .links li {
        margin-right:5px;
    }
}


div[back-img]{
    width: 100%;
    height: 300px;
    color: #fff;
}


div[back-img2]{
    width: 100%;
    height: 200px;
    color: #fff;
}


/*div[back-img3]{
    width: 100%;
    height: 1000px;
    color: #fff;
    margin: 5px;
}*/

#back-Img3{
   /* width: 100%;*/
    height:1000px;
    background-image:url(/img/chester.png);
    background-size:contain;
    background-repeat: no-repeat;
    margin: 10px;
    padding: 0px;

  background-position:bottom center;
}

/*footer end-----------------------------------------------------------------------------------------------------------------------*/



/*form----------------------------------------------*/


.form-wrapper{

    width: 70%;
    height: 90%;
     margin: 50px auto;
      margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0px 0px 50px rgba(0,0,0,.8);
    color: #bfbfbf;
}



 .form-wrapperTitle {
    width: 100%;
    height: 35%;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 14px;
    text-align: center;
    color: #bfbfbf;
    font-weight: bold;
    background: #fff;
    border: #2d2d2d solid 1px;

    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    font-family: Arial;
    background-image:url('/img/oilandgas.png');
}


 .form-wrapperBack {
    width: 100%;
    height: 100%;
    font-size: 14px;
    text-align: center;
    color: #bfbfbf;
    font-weight: bold;
    background: #fff;
    font-family: Arial;

   background-image: url("/img/river.png");
  background-repeat: no-repeat;
   background-height: 100%;
}


.full-background {
    position: relative;
    background-image: url("/img/river.png");
    background-size: cover;
    height: 100%;
    width: 100%;
    top: 0;
}







/* .form-wrapperFooter {
    width: 70%;
    height: 15%;
    font-size: 14px;
    text-align: center;
    color: #bfbfbf;
    font-weight: bold;
    background: #fff;
    border: #2d2d2d solid 1px;
    margin-bottom: 0px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    font-family: Arial;
    padding-top: 13px;
    padding-bottom: 13px;
    position: absolute;
    bottom: 0;
}*/

.form-fundBackground {
    width: 100%;
    height: 12%;
    background: #FFFFFF;
    padding-top: 2px;
    padding-bottom: 2px;
     box-shadow: 0px 9px 24px 0px rgba(0,0,0,0.8);
}

.form-wrapperRight{

    width: 40%;
    height: 90%;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 580px;
    overflow: hidden;
    background: #fff;
    border-radius:;
    box-shadow: 0px 0px 50px rgba(0,0,0,.8);
    color: #bfbfbf;
}











ul# .active{
    border-color: white;
    border-left-color: black;
    border-top-color: black;
    color: white;
    background-color: #adadad;
}


#ex1Slider .slider-selection {
        background: #BABABA;
}






























/* colorDissolve  */
.colorDissolve {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 550px;
  background: #000000;
}
.colorDissolve .item {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-animation: colorDissolve 24s linear infinite;
  -moz-animation: colorDissolve 24s linear infinite;
  -ms-animation: colorDissolve 24s linear infinite;
  animation: colorDissolve 24s linear infinite;
}
.colorDissolve .item:nth-child(2) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
.colorDissolve .item:nth-child(3) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
span2{
position:absolute;
    top:30px;
    left:20px;
    color:#000000;
     font-family:"Verdana", sans-serif;  font-size:30.0px; line-height:1.19em
    -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

span3{
position:absolute;
    top:85px;
    left:110px;
    color:#000000;
    font-family:"Verdana", sans-serif;  font-size:30.0px; line-height:1.19em;
    -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}





.colorDissolve .item:nth-child(4) {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}

@-webkit-keyframes colorDissolve {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@-moz-keyframes colorDissolve {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@-ms-keyframes colorDissolve {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@keyframes colorDissolve {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}


















.slide {
  position:relative;
    left: 0;
    top: 0;
    width: 100%;
   height: 100%;
}
.slide.ng-enter,
.slide.ng-leave {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.slide.ng-enter {
    left: 100%;
}
.slide.ng-enter-active {
    left: 0;
}
.slide.ng-leave {
    left: 0;
}
.slide.ng-leave-active {
    left: -100%;
}

这是 index.html 的一部分。我已经听从了这里的人们的建议并更改了标记...但颜色仍然不会改变？

<body>



  <!-- HEADER AND NAVBAR -->
  <header>





    <div class="wrap">
      <!-- logo -->

       <a href="#!"><img class="logo" src="img/history_00.png" /></a>
  <h7>Building lasting relationships<h7>



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

Answer 1

正如您问题的 cmets 中所述，您有一些不正确的标记。由于我不熟悉 angularjs，我不知道它是否会在完全加载后移动元素，但我猜它不会。

话虽如此，你有这样的 CSS 选择器：

• header nav
• header nav ul
• header nav ul li
• header nav ul li a
• header nav ul li a.active
• header nav ul li a.active:hover
• header nav ul li a:hover, header nav ul li a.activeSmall

我相信这些就是您尝试使用的导航样式。

问题是，根据您提供的 HTML，上面列出的 CSS 选择器不会选择任何内容。让我们看看header nav ul 规则。这条规则说：

选择任何ul元素的后代，该元素是任何nav元素的后代，该元素是任何header元素的后代。

您的 HTML 中没有 <nav> 元素，CSS 选择器将失败，因为它无法匹配任何内容。

但是，您的标记中确实有一个 .nav 类。所以修改你的选择器：

header nav ul 到 header .nav ul

*尽管我确定您已经意识到这一点，但 CSS 类选择器以句点开头。

很遗憾，这也不起作用，因为它与您的标记不匹配。如果您的 .nav 类的无序列表实际上包含在您的 <header> 标记中，那么您将走在正确的轨道上。但是.nav 也是您要定位的ul，因此header .nav ul 也不起作用。使用该选择器，您将定位任何ul，它是任何.nav 的后代，它是任何标头的后代。将其简化为header .nav 或header ul。

目前你的标记有点像这样：

<html>
    <head>
        <meta>
        <link>
    <header>
        <div>
    <body>
        <ng-controller> <!-- supposed to be a div? -->
        <ul>
           <li> <!-- random closing div tag inside one of these li -->
               <a>
        <h3>

为了使您的选择器正常工作，您需要进行上述修改以定位导航类而不是导航元素，然后您需要调整标记。将<header> 标记从<head> 和<body> 标记之间移出并移入<body> 标记。

类似的东西（不是完整的答案，需要根据您的标记进行调整）：

CSS

header .nav {
     /* your styles here */
}
header .nav li {
     /* your styles here */
}
header .nav li a {
     /* your styles here */
}
/* ... etc. ... */

HTML

<body>
    <header>
        <ul class="nav">
           <li><a></a></li>
        </ul>
    </header>
</body>

哦，还有一件事，确保您的 CSS 选择器与 Bootstrap 的选择器一样具体或更具体。