twitter-bootstrap - 在第一个 child 上更改 Bootstrap 导航栏侧边栏的元素颜色

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

I want the first child's font color on the a element to be white, but this code changes all the font colors to white for the whole sidebar.

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

当然可以，因为现在您不再选择作为其父项的第一个子项的 LI，而是选择作为其 LI 父项的第一个子项的 A - 当然是所有这些，< em>因为您正在选择所有 LI。

您需要继续选择第一个 LI 元素，然后选择其中的链接:

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