Question

我正在尝试使用CSS获取页面上的第一篇文章。我尝试过以下方法：

article:first {
    background: blue;
}

和

article:first-child {
    background: blue;
}

然而，这些似乎都没有做任何事情。

我的HTML标记如下（删除头部和内容省略）：

...
<body>
    <div id="wrapper">
        <header>
            <hgroup>
                ...
            </hgroup>
        </header>
        <article>
            ...
        </article>
        <article>
            ...
        </article>
    </div>
</body>

我也在使用最新版本的Chrome。

Answer 1

您正在寻找的是#wrapper article:first-of-type，但遗憾的是它还没有被广泛支持。

你可以尝试#wrapper header + article，因为支持更广泛。

Answer 2

尝试修改标记：

...
<body>
    <div id="wrapper">
        <header>
            <hgroup>
                ...
            </hgroup>
        </header>
        <section>
            <article>
                ...
            </article>
            <article>
                ...
            </article>
        </section>
    </div>
</body>

:first-child仅适用于真正的第一个子元素（在您的情况下为header）。

带有文章的CSS伪类

2 个答案: