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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:57:55  来源:igfitidea点击:

first-child and nth-child selectors on HTML5 "article" tag not being applied

htmlcsscss-selectors

提问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" &larr; 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

来源: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-childnth-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