更改链接的颜色在我的引导导航栏

我有我的导航栏下面的代码：更改链接的颜色在我的引导导航栏

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

}

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

来源

2015-06-04 Pablo

你需要让你的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的级联性，并会阻止后来的重写。

来源

2015-06-04 01:52:07 PSL

所以，我需要制作一个完整的道路，我想要重写的项目，那是解释权利？ – Pablo

@Pablo不，你真的不知道。但是指定一个完整的路径可以确保这个颜色仅适用于nav_bar-nav下li的直接后裔anchor_。如果你在引导后加载你的css，你也可以通过'a {color：black}'覆盖。 – PSL

<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

来源

2015-06-04 01:50:12

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

来源

2015-06-04 01:50:33

更改链接的颜色在我的引导导航栏

回答

相关问题