CSS :first-child unexpectedly working fine

Question

我正在使用 Bootstrap 构建网站。

我想通过向其 a:active 元素添加下划线效果来自定义我的 .navbar 除了第一个，这将是我的品牌名称或主页链接所在的位置，如下面的屏幕截图所示:

我用下面的代码片段实现了这个效果:

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

对我来说有趣的是，我认为这会产生相反的效果，因为我选择了 :first-child 而不是 :not(:第一个 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

所有菜单链接都是它们各自父级 li 的 first-child。

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

也许您混淆了first-of-type？