在 first-child 上更改 bootstrap 导航栏侧边栏元素颜色

Question

以下 CSS 成功更改了我侧边栏导航的第一个 child 的背景颜色和边框：

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

这 CSS 是我需要帮助的地方。我希望 a 元素上第一个 child 的字体颜色为白色，但此代码将整个侧边栏的所有字体颜色更改为白色。

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 - 当然是所有这些项,因为您正在选择全部 LI.

您需要继续选择第一个 LI 元素，然后选择其中的 link(s)：

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

在 first-child 上更改 bootstrap 导航栏侧边栏元素颜色

Change bootstrap navbar sidebar a element color on first-child

css

navbar

twitter-bootstrap