为什么我的scss文件中的嵌套选择器中的某些属性有效,而其他属性被省略?

时间:2017-06-03 07:10:18

标签: html css sass

具体来说,我试图在我的导航栏中设置我的锚标签样式,但似乎只有一些样式有效!锚标记嵌套在我的list-item标记中,它们都嵌套在我的.navbar-nav类中。

例如,在我的_nav.scss文件中,我可以改变嵌套锚标签的高度(增加锚的高度&#34; s&#34;活动&#34;背景),这是什么我需要。但是,当我尝试指定锚点的颜色或填充时,我无法这样做。令我感到困惑的是,通过在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;
}

0 个答案:

没有答案