除非不应该这样,但我似乎nth-child无法承认类选择器。
nth-child
我在另一个div内说了4个div,所有的类和id都在上面。我需要选择具有该类的div的第一个实例。例如:
#content .foo:nth-child(1) { margin-top: 0; }
并且显然再次first-child获得相同的效果,但它不会影响任何div。
first-child
现在,如果我要强制它与该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过像这样:
nth-of-type
#content .table:nth-of-type(1) { margin: 0 }
同样,只有当我说时,它才会响应nth-of-type(3)。
nth-of-type(3)
尝试使用:nth-of-type()伪选择器:
:nth-of-type()
#content .foo:nth-of-type(1) { margin-top: 0; }
请注意,:nth-of-type()计数具有相同名称的元素。因此,.foo:nth-of-type(1)将不会选择具有 foo 类的第一个元素,而是选择按相同名称分组的元素列表中第一个元素的第一个元素。如果您有这样的文件:
.foo:nth-of-type(1)
<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>并且两者都是其自身的第一个类型。
<i class="foo">1</i>
<b class="foo">3</b>