Html 选择第n个子类

我正在寻找有关使用第n个子CSS选择器的帮助。如果你看看我的HTML

<div id="report">
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
</div>

我只想显示第一个B，隐藏其他的，但是我似乎不能像我期望的那样选择类。当我尝试使用：

.b:nth-child(1){
    display: block;
}

.b:nth-child(n+2){
    display: none;
}

它不起作用，我必须使用（5）选择它才能得到第一个B

非常感谢您的帮助

---

jsiddle:

这不需要javascript

.b ~ .b{
    display:none;
}   

一般同级组合器

一般同级组合选择器与相邻同级组合选择器非常相似。不同之处在于，被选择的元素不需要立即继承第一个元素，而是可以出现在它之后的任何位置

这是您的jquery

$('.b').not('.b:eq(0)').hide();

使用Jquery

$('.b:not(div:first)').hide();

---

在这里，我将演示放在类选择器之后，

n个子项

未应用，它总是在传递的索引中选择与父元素相关的元素…请参见@ArunPJohny，恕我直言，您可以在单个注释或答案中添加这些元素，而不是垃圾评论…请停止建议使用整个javascript框架来做一些可以用CSS完成的事情。@ColinBacon，恐怕有。非常好！很好的解决方案。这很好，你也可以链接它，例如

.b:none

，

.b~.b:block

，

.b~.b~.b:none

它总是让我惊讶

~

组合器是多么的模糊，因为即使IE7对它也有部分支持，所以它已经可以使用很长一段时间了。请注意，此答案假设

div

元素默认的

display:block

，这样就不需要常规的

.b

选择器-如果您希望对第一个元素应用任意样式，则需要使用常规规则应用它们，然后使用同级规则撤消它们，如前所述，答案原来有

显示块

。你们疯了吗。你查过小提琴了吗？我想这仍然是一个正确的答案。。因为OP在他的问题中标记了jquery是的。他在jquery中标记了这个问题。所以我们可以在jquery中给出一个解决方案。请不要建议人们使用javascript，更不用说一个完整的javascript框架来解决一个可以用Java解决的CSS问题CSS@NigelAngel也不要假设jQuery框架还没有被使用。OP自己在问题中加了标签，因此这是一个有效的答案。

$('.b:not(div:first)').hide();