小编典典

nth-child不响应类选择器

css

除非不应该这样,但我似乎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)


阅读 758

收藏
2020-05-16

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

2020-05-16