为什么：nth-​​child（2）选择器能够满足我的期望：第一个孩子？

Question

我有example我要问的内容。

我经常使用这种格式。我期望能够选择fieldset div:first-child { }的第一个div，但似乎它只被第二个子选择器抓住了。我希望“场1”是红色而不是蓝色。在语义上（至少对我来说）更有意义地说“像这样设置字段集中的第一个div”，而不是说第二个。

为什么会发生这种情况，是否有办法达到我想要的效果（能够调用div：first-child）？

Answer 1

:nth-child选择器忽略元素类型。 div:nth-child(2)选择<div>，这是第二个孩子。

如果您想选择第一个div，请使用:nth-of-type(1)或:first-of-type选择器。

演示：http://jsfiddle.net/Z3Bcq/1/

Answer 2

在这种情况下，第一个div之前的<legend>是其共享父级的实际:first-child。您可以考虑使用:nth-of-type选择器。

Fiddle here

Answer 3

以下是如何解释：nth-​​child选择器的工作原理：

  

这个伪类根据它们在父元素的子元素列表中的位置来匹配元素。伪类接受参数N，其可以是形式为a + b的关键字，数字或数字表达式。有关更多信息，请参阅了解：nth-​​child伪类表达式。

     

如果N是数字或数字表达式，则：nth-​​child（N）匹配文档树中以N-1兄弟为前缀的元素。

     

以下示例选择器是等效的，并且将匹配奇数编号的表行：

tr:nth-child(2n+1) {
  ⋮ declarations
}
tr:nth-child(odd) {
  ⋮ declarations
}

     

此示例选择器将匹配任何表的前三行：

tr:nth-child(-n+3) {
  ⋮ declarations
}

     

此示例选择器将匹配其父元素的第一个子元素的任何段落：

p:nth-child(1) {
  ⋮ declarations
}

     

这当然等同于选择器p:first-child.

注意：有关选择器的详细信息，请参阅链接：http://reference.sitepoint.com/css/pseudoclass-nthchild