Question

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

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

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

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父母的第一个孩子 - 这当然是所有的孩子，< em>因为您正在选择所有 LI。

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

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

更改bootstrap navbar侧边栏在first-child上的元素颜色

1 个答案: