更改鏈接的顏色在我的引導導航欄

Question

我有我的導航欄下面的代碼：

<nav class="navbar navbar-fixed-top" id="my-navbar"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="" class="navbar-brand"><img style ="max-width:100px; margin-top: -7px;" src="images/firma-Edgar-Ayales.png" alt=""></a> 
     </div><!--End navbar-header--> 
     <div class="collapse navbar-collapse navbar-right" id="navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#portfolio">Feedback</a> 
       <li><a href="#features">Gallery</a> 
       <li><a href="#gallery">Features</a> 
       <li><a href="#feedback">Faq</a> 
       <li><a href="#contact">ContactUs</a> 
      </ul> 
     </div> 
    </div><!-- End container --> 

而且我想改變鏈接的顏色，我在我的CSS嘗試這樣做：

.navbar { 
background: rgba(0,0,0,0.4); 
    font-family: "Raleway"; 
font-size:10pt; 
letter-spacing: 3pt; 
color: black; 

}

我也想加入！重要的，但我不能做到這一點。

Answer 1

你需要讓你的CSS更具體，由bootstrap應用的顏色是a。所以首要的規則將是：

.navbar-nav > li >a{ 
    color:black; 
} 

覆蓋由引導錨應用的默認規則：

a { 
    color: #337ab7; 
    text-decoration: none; 
} 

Pen

這可以確保這個顏色只適用於錨這是直接後代.navbar-nav李的直系後代。爲了在全球範圍內應用（網頁中的所有超鏈接），您可以通過做a{color:black}覆蓋。你還需要確保你在啓動後加載了你的css，這樣它的優先級高於bootstrap。避免使用!important它會破壞CSS的級聯性，並會阻止後來的重寫。

Answer 2

<nav class="navbar navbar-fixed-top" id="my-navbar"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="" class="navbar-brand"><img style ="max-width:100px; margin-top: -7px;" src="images/firma-Edgar-Ayales.png" alt=""></a> 
     </div><!--End navbar-header--> 
     <div class="collapse navbar-collapse navbar-right" id="navbar-collapse"> 
      <ul class="nav navbar-nav" id="links"> 
       <li><a href="#portfolio">Feedback</a> 
       <li><a href="#features">Gallery</a> 
       <li><a href="#gallery">Features</a> 
       <li><a href="#feedback">Faq</a> 
       <li><a href="#contact">ContactUs</a> 
      </ul> 
     </div> 
    </div><!-- End container --> 

CSS：

#links a{ 
    color:#000000; 
    font-size:18px; 
} 

我只是說id="links"到了UL，然後引用一個在與CSS

Answer 3

這裏是一個可能的解決方案」 https://jsfiddle.net/99x50s2s/52/

CSS：

.nav>li>a{ 
background: rgba(0,0,0,0.4); 
    font-family: "Raleway"; 
font-size:10pt; 
letter-spacing: 3pt; 
color: black; 
}