我似乎无法让 css first_child 工作

Question

通常，这是一项非常简单的任务。由于某种原因，今天，它似乎不想工作。有什么我做错了吗？问这个问题我可能听起来很傻。 :)

这是css代码：

#header > .navigation {
    display: inline-block;
}
    #header > .navigation > a {
        text-decoration: none;
        color: #202020;
    }
        #header > .navigation > a:first_child { /* This is what isn't working */
            color: #ff0000;
        }

这是html代码：

<div id="header">
    <div class="navigation">
        <a href="#">Start</a>
        <a href="#">Account</a>
        <a href="#">Contact</a>
        <a href="#">Whoah, what is this place?</a>
    </div>
</div>

.navigation 显示为内联块有问题吗？它必须保持类似的显示模式，因为在#header 中它旁边还有另一个div。我没有在上面的代码中显示这个 div，以使这个消息尽可能简单易懂。

Answer 1

代替：

#header > .navigation > a:first_child

用途：

#header > .navigation > a:first-child

Answer 2

错误已解决

a:first-child{ ... }

匹配<a> 元素，它们是其父元素的第一个子元素。您的元素位于完全不同的<li>-elements 中，因此它们都是其父元素的第一个子元素。

参考： a:first-child modifying all links within my list

Answer 3

立即尝试

这是css代码：

#header > .navigation { display: inline-block; }
#header > .navigation > a { text-decoration: none; color: #202020; }     
#header > .navigation > a:first-child { /* dash not underscore */ color: #ff0000; }