更改Bootstrap导航栏中链接的颜色

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; 

我也尝试添加! important，但是我无法实现。

- Pablo

Answer 1

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

我只是在ul中添加了id="links"，然后用CSS引用其中的a。

- solid_luffy

Answer 2

这是一个可能的解决方案：“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; 
}

- JGV

Answer 3

您需要让您的CSS更具体化，Bootstrap中应用的颜色在a标签上。因此，覆盖这个规则会是：

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

覆盖bootstrap对锚点应用的默认规则：

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

笔

这样可以确保该颜色仅应用于直接是 .navbar-nav 的子级的 li 的直接后代的锚点。为了全局应用（网页中的所有超链接），您也可以通过执行 a{color:black} 来覆盖。您还需要确保在引导程序之后加载您的 CSS，以便它优先于引导程序。避免使用 !important，它会破坏 CSS 的任何级联性，并防止以后进行任何覆盖。

- PSL

---

那么，我需要创建一个完整的路径来覆盖我想要覆盖的项目，这就是解释的意思吗？ - Pablo

@Pablo 不是真的需要。但是指定完整的路径可以确保该颜色仅应用于导航栏下的li的直接后代锚点。如果您在引导程序之后加载CSS，则也可以通过执行a{color:black}来覆盖它。 - PSL