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-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.
我的问题是:为什么标签上的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-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 :
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 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.
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
。