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的{​​{1}}。

li链接不是navbar-brand ....因为它前面有div first-child。

也许你会混淆navbar-header？