Html 未应用 HTML5“文章”标签上的 first-child 和 nth-child 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6256372/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
first-child and nth-child selectors on HTML5 "article" tag not being applied
提问by Jeroen
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.
我在 HTML5<article>标签上使用了一些 CSS2 和 CSS3 选择器，但似乎其中一些（但不是全部）没有像我期望的那样工作。
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-childselectors on <article>tags work? And even weirder: the last-childselector does work. I tested in FF4, IE9 and Chrome11, all the same results.
我的问题是：为什么标签上的nth-child(n)和first-child选择器<article>不起作用？更奇怪的是：last-child选择器确实有效。我在 FF4、IE9 和 Chrome11 中测试过，结果都是一样的。
The <p>tags function as a a sanity check; to see that the nth-child(n)selector does work for some tags.
该<p>标签充当AA完整性检查; 查看nth-child(n)选择器是否适用于某些标签。
What am I missing? Is my sample supposed to work at all?
我错过了什么？我的样本应该有效吗？
回答by Laurent le Beau-Martin
first-childonly 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 :
first-child仅当它是其父标签的第一个子标签时才选择该标签。在您的情况下，第一个<article>标签是总体上的第五个标签。也一样nth-child(n)。它与同类型的兄弟标签无关，而是与所有兄弟标签有关。来自 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.
:nth-child(an+b) 伪类表示法表示一个元素，在文档树中它之前有 an+b-1 个兄弟元素，对于任何正整数或 n 的零值，并且有一个父元素。
Source: http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
回答by melhosseiny
The articleelement in your example is a 5th child not a first child. :first-childand nth-child(1)select the first child of the parent.
article您示例中的元素是第 5 个孩子，而不是第一个孩子。:first-child并nth-child(1)选择parent的第一个孩子。
The :first-of-type(or :nth-of-type(1)) selector however will select the first element of type article.
然而:first-of-type（或:nth-of-type(1)）选择器将选择 type 的第一个元素article。
