HTML5"article"标签上的第一个孩子和第n个孩子选择器未被应用

Question

我在HTML5 <article>标签上使用了一些CSS2和CSS3选择器,但似乎有一些(但不是全部)它们没有像我期望的那样工作.

这是一个可运行的例子:

/* 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" &larr; not working as expected...</article>
  <article>Article 2, expected "color: gold"</article>
</div>

我的问题是:为什么标签上的nth-child(n)和first-child选择器<article>不起作用？甚至更奇怪:last-child选择器确实有效.我测试了FF4,IE9和Chrome11,结果都一样.

该<p>标签充当AA完整性检查; 看看nth-child(n)选择器是否适用于某些标签.

我错过了什么？我的样品应该可以使用吗？

Answer 1

first-child仅当标记是其父标记的第一个子标记时才选择标记.在您的情况下,第一个<article>标记是整体的第五个标记.同样如此nth-child(n).它与相同类型的兄弟标签无关,而与所有兄弟标签无关.来自W3C:

:nth-​​child(an + b)伪类表示法表示在文档树中具有+ b-1兄弟的元素,对于n的任何正整数或零值,并且具有父元素.

资料来源:http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

Answer 2

article您示例中的元素是第5个孩子,而不是第一个孩子.:first-child并nth-child(1)选择父级的第一个子级.

然而,:first-of-type(或:nth-of-type(1))选择器将选择类型的第一个元素article.