の変更、ブートストラップナビゲーションバーサイドバーの最初の子、次のCSSが正常に私のサイドバーナビゲーションの最初の子の背景色と境界線を変更する

Question

上の要素色：私は助けを必要とするところ、このCSSは

nav.sidebar .navbar-nav > li:first-child{ 
    border-bottom: 1px #c9c9c9 solid;  
    background: #2980b9;   
} 

。 a要素の最初の子のフォント色を白にしたいが、このコードはサイドバー全体ですべてのフォント色を白に変更する。

nav.sidebar .navbar-nav > li > a:first-child{ 
    color: #ffffff; 
} 

私のhtml：

<nav class="navbar navbar-inverse sidebar" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button>  
    </div> 
    <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li ><a href="{{ route('admin.dashboard') }}">Dashboard 
     <span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li> 
     <li ><a href="{{ route('admin.athletes') }}">Athletes 
     <span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>   
     <li ><a href="{{ route('admin.new_athlete') }}">Create Athlete 
     <span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-plus-sign"></span></a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Answer 1

私は、要素の最初の子のフォントの色を白にしたいが、このコードは、全体のサイドバーのために白にすべてのフォントの色を変更します。もちろん

nav.sidebar .navbar-nav > li > a:first-child{ 

今、あなたはそれ以上の親の最初の子であるLIが、そのLIの親の最初の子であるAを選択していないので、それは、ありません - それはですもちろんすべてを選択しているためすべて LIです。

あなたが最初のLI要素を選択しておく必要があり、その内、リンク（S）：

nav.sidebar .navbar-nav > li:first-child > a{