带有文章的 CSS 伪类

发布于 2024-12-01 20:00:01 字数 630 浏览 6 评论 0原文

我正在尝试使用 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。

I'm trying to get the first article on the page using CSS. I have tried the following:

article:first {
    background: blue;
}

and

article:first-child {
    background: blue;
}

However neither of these seem to be doing anything.

My HTML markup is as follows (head removed and content ellipsed):

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

I'm also using the latest version of chrome.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

忆离笙 2024-12-08 20:00:01

您正在寻找的是#wrapper Article:first-of-type,但不幸的是它尚未得到广泛支持。

不过,您可以尝试#wrapper header +article,因为它的支持更广泛。

What you're looking for is #wrapper article:first-of-type, but unfortunately it's not widely supported yet.

You could try #wrapper header + article though, for which support is more widespread.

猫性小仙女 2024-12-08 20:00:01

尝试修改您的标记:

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

:first-child 仅适用于 real 第一个子元素(在您的情况下是 header )。

Try modifying your markup:

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

:first-child works only with real first children elements (it was header in your case).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文