带有文章的 CSS 伪类
我正在尝试使用 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技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您正在寻找的是
#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.尝试修改您的标记:
:first-child
仅适用于 real 第一个子元素(在您的情况下是header
)。Try modifying your markup:
:first-child
works only with real first children elements (it washeader
in your case).