I'm using some CSS2 and CSS3 selectors on a HTML5 <article>
tag, but it seems a few (but not all) of them aren't working as I'd expect.
Here's a runnable example:
/* Working as expected: */
div.wrapper p:first-child { color: red; }
div.wrapper p:nth-child(even) { color: fuchsia; }
/* NOT working as expected: */
div.wrapper article:nth-child(1) { color: blue; }
div.wrapper article:first-child开发者_运维技巧 { color: green; }
/* Working as expected: */
div.wrapper article:last-child { color: gold; }
<div class="wrapper">
<p>P1, expected "color: red"</p>
<p>P2, expected "color: fuchsia"</p>
<p>P3, expected no css applied</p>
<p>P4, expected "color: fuchsia"</p>
<article>Article 1, expected "color: green" and/or "color: blue" ← not working as expected...</article>
<article>Article 2, expected "color: gold"</article>
</div>
My problem then is: why won't the nth-child(n)
and first-child
selectors on <article>
tags work? And even weirder: the last-child
selector does work. I tested in FF4, IE9 and Chrome11, all the same results.
The <p>
tags function as a a sanity check; to see that the nth-child(n)
selector does work for some tags.
What am I missing? Is my sample supposed to work at all?
first-child
only selects the tag if it is the first child tag of its parent tag. In your case, the first <article>
tag is the fifth tag overall.
Same goes for nth-child(n)
. It is not related to sibling tags of the same type, but to all sibling tags. From W3C :
The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.
Source: http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
The article
element in your example is a 5th child not a first child. :first-child
and nth-child(1)
select the first child of the parent.
The :first-of-type
(or :nth-of-type(1)
) selector however will select the first element of type article
.
精彩评论