nth-child不响应类选择器

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)。

Answer 1

尝试使用:nth-of-type()伪选择器：

#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>并且两者都是其自身的第一个类型。