CSS Pseudo Classes with Article
I'm trying to get the first article on the page using CSS. I have tried the 开发者_JAVA百科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.
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.
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).
加载中,请稍侯......
精彩评论