隐藏具有特定类的第一个div

Question

我想隐藏(display:none)带有.leftAddress类的第一个div

这是css

fieldset .leftAddress:first-of-type{
    display:none;
}

这是html

<fieldset>
    <div class="alert forward"><span class="coming"><strong>NOTE:</strong></span> A maximum of 5 address book entries allowed.</div>
    <div class="leftAddress">Any</div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Harry Testing</h3>
    </div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Heba ElZany</h3>
    </div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Yamen Shahin&nbsp;(primary address)</h3>
    </div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Yamen2 Shahin2</h3>
    </div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Yamen3 Shahin3</h3>
    </div>
</fieldset>

正如你所看到的那样:first-of-type,但它似乎无法正常工作.我在这里错过了什么？我也尝试过:nth-​​of-type(1)http://jsfiddle.net/arns7/4/它不起作用.所以这个解决方案对我来说不适用于带有类的第一个元素的CSS选择器

Answer 1

CSS解决方案:

有了CSS,据我所知,没有直接的方法可以做到这一点.但是,您可以执行以下操作解决方案.

fieldset .leftAddress {
    display:none;
}
fieldset .leftAddress ~ .leftAddress {
    display: block;
}

说明:第一规则集的display作为none用于与所有元素.leftAddress的字段集下类,然后第二个设置display到block用于与所有元素.leftAddress类也具有与同一类前述兄弟节点.因此总的来说,具有类的第一个元素.leftAddress仍然是隐藏的.

CSS解决方案演示

注意:正如xec在注释中指出的那样,CSS解决方案仅在用于兄弟元素的元素时才有效.如果它们不是,并且说class='leftAddress'在字段.leftAddress集中有一个包含在包装器内的元素(另一个级别),则字段集中的第一个元素和字段集中.leftAddress包装器中的第一个元素将被隐藏(如此处).

因此,实质上它隐藏了同一父级中该类的第一个元素.

基于Javascript的解决方案:

如果您在使用Javascript实现此效果时没有任何问题,可以使用以下代码执行此操作.此解决方案没有基于CSS的解决方案中提到的限制(此处可以看到示例).

window.onload = function(){
    document.getElementsByClassName('leftAddress')[0].style.display = 'none';
}

1. document.getElementsByClassName('leftAddress')[0]- 获取DOM中的第一个元素,类名为leftAddress.这[0]是必需的,因为getElementsByClassName返回一个节点列表(如复数名称所示),因此我们必须像对待任何数组一样引用它.

2. style.display = 'none'- 相当于CSS的Javascript display: none.

JS解决方案演示

注意:如第1点所述,这当前隐藏了整个文档中该类的第一个元素.如果要将其限制为该类中的第一个元素,fieldset也可以这样做.