CSS nth-child 不响应类选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3203313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
nth-child doesn't respond to class selector
提问by stuartc
Unless it's not supposed to but I can't seem to get nth-childto acknowledge the class selector.
除非它不应该，但我似乎nth-child无法承认类选择器。
I have say 4 divs inside another div, all of various classes and ids. I need to select the first instance of a div with said class. For example:
我在另一个 div 中说了 4 个 div，所有的类和 ID。我需要选择具有所述类的 div 的第一个实例。例如：
#content .foo:nth-child(1) { margin-top: 0; }
And obviously again with first-childto get the same affect, but it doesn't affect any of the divs.
显然再次first-child获得相同的效果，但它不会影响任何 div。
Now if I want to force it to work with that div I can do this:
现在，如果我想强制它与那个 div 一起工作，我可以这样做：
#content .foo:nth-child(3) { margin-top: 0; }
It just so happens that it is the 3rd div in #content, which is pointless because I need to get the 1st instance of anything with that class.
碰巧它是#content 中的第 3 个 div，这是毫无意义的，因为我需要使用该类获取任何内容的第一个实例。
<div id="content">
<div id="action-bar"> </div>
<div id="message"> </div>
<div class="table"> </div>
<div class="clear"> </div>
</div>
Here's a sample of the HTML, I've tried nth-of-typeas well like this:
这是 HTML 的示例，我也试过nth-of-type这样的：
#content .table:nth-of-type(1) { margin: 0 }
Again it only responds when I say nth-of-type(3).
同样，它仅在我说nth-of-type(3).
EDIT:
编辑：
I've set up a working example of the problem I'm having here: http://jsfiddle.net/aHwS8/
我已经设置了我在这里遇到的问题的工作示例：http: //jsfiddle.net/aHwS8/
回答by Gumbo
Try the :nth-of-type()pseudo-selectorinstead:
尝试使用:nth-of-type()伪选择器：
#content .foo:nth-of-type(1) { margin-top: 0; }
Note that :nth-of-type()counts the elements with the same name. So .foo:nth-of-type(1)will not select the first element with the class foobut any first element that is the first in the list of elements grouped by the same name. If you have some document like this:
请注意，: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)will select the elements <i class="foo">1</i>and <b class="foo">3</b>as both are the first of its own type.
.foo:nth-of-type(1)将选择元素<i class="foo">1</i>，<b class="foo">3</b>因为两者都是它自己类型的第一个。
回答by fhollste
This is an old post but I ended up here seeking for an answer for similar problem. Perhaps this will help someone.
这是一篇旧帖子，但我最终在这里寻找类似问题的答案。也许这会帮助某人。
I had the following structure, wanting to select the n-th "foo"-div:
我有以下结构，想要选择第 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>
The trick was "go back" and select the parent element with repeated siblings, in this case .containerand then select its child(ren):
诀窍是“返回”并选择具有重复兄弟姐妹的父元素，在本例中为.container，然后选择其子元素（ren）：
.container:nth-of-type(3) .foo {
styles here
}
回答by Jake
I think you're using the wrong selector, try:
我认为您使用了错误的选择器，请尝试：
#content .foo:first-of-type { margin-top: 0; }
