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> - 元素，因此它们都是其父元素的第一个子元素。

参考： 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; }

我似乎无法让第一个孩子去上班

3 个答案: