CSS：第一个孩子出人意料地工作良好

我正在用Bootstrap建立一个网站

我想通过在

a:active

元素中添加下划线效果来定制我的

.navbar

，但第一个元素除外，这将是我的品牌名称或主页链接所在的位置，如下面的屏幕截图所示：

我通过以下代码片段实现了这一效果：

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

有趣的是，我认为这会产生相反的效果，因为我选择了

：first child

和not

：not（：first child）

那么为什么它工作正常呢

切换导航

所有的菜单链接都是各自父母的

第一个孩子

navbar brand

链接不是

第一个子项

…因为它前面有div

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>