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>标记用作健全性检查;看到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类型的第一个元素。

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

2 个答案: