【问题标题】：nth-child doesn't respond to class selector [duplicate]nth-child 不响应类选择器 [重复]
【发布时间】：2011-03-13 07:28:24
【问题描述】：

除非不应该这样做，但我似乎无法让 nth-child 确认类选择器。

我说另一个 div 中有 4 个 div，所有不同的类和 id。我需要选择具有所述类的 div 的第一个实例。例如：

#content .foo:nth-child(1) { margin-top: 0; }

显然再次使用first-child 来获得相同的效果，但它不会影响任何 div。

现在，如果我想强制它与该 div 一起工作，我可以这样做：

#content .foo:nth-child(3) { margin-top: 0; }

恰好它是#content 中的第三个 div，这是没有意义的，因为我需要使用该类获取任何东西的第一个实例。

<div id="content">  
  <div id="action-bar"> </div>
  <div id="message"> </div>
  <div class="table"> </div>
  <div class="clear"> </div>
</div>

这是一个 HTML 示例，我尝试过 nth-of-type 也是这样的：

#content .table:nth-of-type(1) { margin: 0 }

同样，它只在我说 nth-of-type(3) 时才会响应。

编辑：

我已经为我在这里遇到的问题设置了一个工作示例：http://jsfiddle.net/aHwS8/

【问题讨论】：

也许您应该向我们展示实际 HTML 文档的相应部分。
@gumbo 确定，我刚刚编辑了它.. :)
但是（至少在这个例子中）你只有一个具有 table 类的元素。
@gumbo 是的，但是“n”只响应它在容器 div 中的数字，而不是它在 .table 列表中的数字。我认为我对这些伪选择器的理解有点偏离。 @Jake 描述了我正在尝试做的完美“o 你想要的是第一个 div 类 .foo 不管它是哪个孩子。但是这个选择器所做的是第一个 div 如果它也有类 .foo”将会有再次点击谷歌。感谢您的帮助！
是的，:nth-of-type() 和 :nth-child() 在计数时都只考虑元素类型或仅考虑元素。

标签： css css-selectors

【解决方案1】：

改用:nth-of-type() pseudo-selector：

#content .foo:nth-of-type(1) { margin-top: 0; }

请注意，:nth-of-type() 会计算具有相同名称的元素。所以.foo:nth-of-type(1) 不会选择类 foo 的第一个元素，而是选择按相同名称分组的元素列表中的第一个元素。如果你有这样的文件：

<div>
    <i class="foo">1</i><i>x</i><i class="foo">2</i>
    <b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>

.foo:nth-of-type(1) 将选择元素 <i class="foo">1</i> 和 <b class="foo">3</b>，因为它们都是其自身类型中的第一个。

【讨论】：

谢谢！我尝试得到相同的响应，它响应：#content .foo:nth-of-type(3) { margin-top: 0; }
有点类似，就好像它忽略了 .foo 类而只选择了 div
@stuartc：它不会忽略这个类。 .foo:nth-of-type(3) 仅适用于那些具有类“foo”的元素并且是其类型的第三个（在此元素之前只有 2 个具有相同元素名称的其他兄弟）。
@Gumbo - 从某种意义上说，它确实忽略了类。它似乎在查看该类的元素，然后查看该类型的所有其他元素无论它们的类如何。所以它最初确实使用类来查找元素，但从那里开始，该类型的元素是否具有类似乎并不重要。
确实如此，看这个例子：jsfiddle.net/DK3zc 就是通过属性忽略了选择器。

【解决方案2】：

我认为您使用了错误的选择器，请尝试：

#content .foo:first-of-type { margin-top: 0; }

【讨论】：

谢谢！我尝试得到相同的响应，它响应：#content .foo:nth-of-type(3) { margin-top: 0; }
嗯，我明白了 - 所以你想要的是第一个 div 和 .foo 类，不管它是哪个孩子。但是这个选择器的作用是第一个div，如果它也有类.foo？从一个快速的谷歌并查看 CSS3 Pseudo-Selectors 我不确定这是可能的。抱歉，我无法提供更多帮助！
感谢您的帮助，尽管没有解决我的问题，但我学到了很多关于伪选择器的知识！ :) 再次感谢！

【解决方案3】：

这是一篇旧帖子，但我最终在这里寻求类似问题的答案。也许这会对某人有所帮助。

我有以下结构，想要选择第 n 个“foo”-div：

<body>
  <div class='container'>
    <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
</body>

诀窍是“返回”并选择具有重复同级的父元素，在本例中为 .container，然后选择其子元素（ren）：

.container:nth-of-type(3) .foo {
    styles here
}

【讨论】：