编辑：

Question

除非它不应该，但我似乎无法让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中的第3个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/

Answer 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>，因为它们都是自己的第一个类型。

Answer 2

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

我有以下结构，想要选择第n个＆＃34; foo＆＃34; -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>

诀窍是＆＃34;回去＆＃34;并使用重复的兄弟选择父元素，在本例中为 .container ，然后选择其子（ren）：

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

Answer 3

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

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

nth-child不响应类选择器

编辑：

3 个答案: