CSS: первый ребенок неожиданно работает отлично

Question

Я строю сайт, используя Bootstrap.

Я хочу, чтобы настроить мой .navbar путем добавления подчеркивания эффекта к его a:active элементов кроме первый, который был бы где моя марка или домашний ссылка будет, как вы можете видеть на скриншоте ниже:

я достиг этого эффекта с помощью следующего фрагмента кода:

.navbar { 
    a:first-child { 
     &:active span, &:focus span { 
      border-bottom: 2px solid $secondary; 
     } 
    } 
} 

Что интересно мне что я думал, что это будет напротив эффекта, так как я выбираю :first-child, а не :not(:first-child).

Почему он работает правильно?

Here's the complete HTML structure of my navbar.

<div class="navbar navbar-inverse navbar-fixed-top smooth unselectable" role="navigation"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-10 col-xs-offset-1"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar top"></span> 
         <span class="icon-bar mid"></span> 
         <span class="icon-bar bot"></span> 
        </button> 
        <a class="navbar-brand" href="" scroll-to="home"><span class="brand">dark<span>peaches</span></span></a> 
       </div> 
       <div class="collapse navbar-collapse" id="js-navbar-collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="#three-eyed-snake" class="smooth" scroll-to="about"><span>About</span></a></li> 
         <li><a href="#three-eyed" class="smooth" ><span>Projects</span></a></li> 
         <li><a href="#three" class="smooth" ><span>Contact</span></a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Все ссылки меню являются first-child их родителю li.

Ссылка не является first-child .... так как ей предшествует div navbar-header.

Возможно, вы сбиваете с толку first-of-type?