我的导航栏有以下代码:
<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,但我做不到。
您需要使css更具体,通过bootstrap应用的颜色已启用a
。因此,首要规则将是:
.navbar-nav > li >a{
color:black;
}
覆盖引导程序对锚应用的默认规则:
a {
color: #337ab7;
text-decoration: none;
}
这样可以确保仅将颜色应用于li的直系后代为li的直系后代.navbar-nav
。为了全局应用(您网页中的所有超链接),您还可以通过进行覆盖a{color:black}
。您还需要确保在引导后加载CSS,以便优先于引导。避免使用!important
它会破坏css的所有可级联性,并在以后防止任何覆盖。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句