更改引导导航栏侧边栏上的第一个孩子

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{