具体来说,我试图在我的导航栏中设置我的锚标签样式,但似乎只有一些样式有效!锚标记嵌套在我的list-item标记中,它们都嵌套在我的.navbar-nav
类中。
例如,在我的_nav.scss
文件中,我可以改变嵌套锚标签的高度(增加锚的高度" s"活动"背景),这是什么我需要。但是,当我尝试指定锚点的颜色或填充时,我无法这样做。令我感到困惑的是,通过在style
标记内的<a>
属性中输入这些属性/值,可以成功更改这两个属性/值。
作为示例,我在html文件中的home
锚标记中指定了这些属性。我在scss文件中输入了锚标记的相同属性/值。成功更改的唯一锚点是我的home
锚标记。知道为什么吗?
<header class="header-main">
<div id="top-nav" class="navbar navbar-inverse navbar-fixed-top"
style="font-size: 30px;width: 100%;border: 1px solid red;">
<div class="container" style="border: 1px solid green;width: 100%;
height:65px;" >
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="navbar-brand" class="navbar-brand" href="#" >Skyapp</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html" style="padding-top:20px; color:purple;">Home</a></li>
<-- Where I entered style attribute and values -->
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="#">Register</a></li>
<li><a href="#">Login</a></li>
</ul>
</div> <!--/.nav-collapse -->
</div>
</div>
</header>
转到my _nav.scss
档案
#navbar{
width: 100%;
height:60px;
}
.navbar-nav{
li{
a{
height:62px;
color:blue;
padding-top:20px;
color:purple;
}
}
}
#navbar-brand{
font-size: 35px;
position:relative;
top:4px;
}