更改引導導航欄側邊欄上的第一個孩子

Question

下面的CSS成功改變了我的側欄導航欄的第一個孩子的背景顏色和邊框一個元素的顏色：

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

這個CSS是我需要幫助。我希望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{ 

當然它當中，因爲現在你沒有選擇被其父任何更多的第一個孩子，但是這是它的李父的第一個孩子在A的李 - 那就是當然所有人，，因爲你正在選擇所有李。

你需要保持在選擇第一個LI元素，然後那裏面的鏈接（S）：

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