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/

一般兄弟组合

一般兄弟组合子选择器与相邻兄弟组合子选择器非常相似不同之处在于所选择的元素不需要立即接替第一个元素，但可以出现在它之后的任何地方。

More info

Answer 2

这是你的jquery

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

Demo

Answer 3

使用Jquery

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

我在这里放了fiddle演示

选择带有nth-child的课程

3 个答案: