stu*_*rtc 32 css css-selectors
除非它不应该,但我似乎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/
Gum*_*mbo 37
请尝试使用: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>因为它们都是自己的第一个类型.
这是一个老帖子,但我最终在这里寻找类似问题的答案.也许这会对某人有所帮助.
我有以下结构,想要选择第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
}
| 归档时间： |
|
| 查看次数： |
48527 次 |
| 最近记录： |