选择带有nth-child的课程

Question

我正在寻找使用nth-child 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>

......我有一排这样的字母:

AAAABAAAABAAA

我想只显示第一个B并隐藏其他B,但我似乎无法像我期望的那样选择类.当我尝试使用时:

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

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

它不起作用,我必须使用(5)选择它才能获得第一个B.

非常感谢帮助.

JSFiddle:http://jsfiddle.net/SrM9T/1/

Answer 1

这不需要javascript

.b ~ .b{
    display:none;
}   

http://jsfiddle.net/KYAj8/1/

一般兄弟组合

一般兄弟组合子选择器与相邻兄弟组合子选择器非常相似不同之处在于被选择的元素不需要立即成功获得第一个元素,但可以出现在它之后的任何地方.

更多信息