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 selector for first element with class

Answer 1

基于CSS的解决方案：

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

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

说明：第一条规则将display设置为none，以便在字段集下为.leftAddress类设置所有元素，然后将第二条设置为{{1}对于具有display类的所有元素，{}为block，该类也具有相同类的前导兄弟。因此总的来说，类.leftAddress的第一个元素仍然是隐藏的。

CSS Solution Demo

注意：正如xec在评论中指出的那样，CSS解决方案仅适用于兄弟元素。如果它们不是，并且在字段集内的包装器（另一个级别）内有一个.leftAddress元素，则字段集中的第一个class='leftAddress'和包装器中的第一个.leftAddress字段集将被隐藏（如here）。

所以，实质上它会隐藏同一个父级中该类的第一个元素。

基于Javascript的解决方案：

如果您在使用Javascript实现此效果时没有任何问题，可以使用以下代码执行此操作。此解决方案没有基于CSS的解决方案中提到的限制（可以看到样本here）。

.leftAddress

window.onload = function(){ document.getElementsByClassName('leftAddress')[0].style.display = 'none'; } - 获取DOM中的第一个元素，其类名为document.getElementsByClassName('leftAddress')[0]。 leftAddress是必需的，因为[0]返回节点列表（如复数名称所示），因此我们必须像对待任何数组一样引用它。
getElementsByClassName - 相当于CSS style.display = 'none'的Javascript。

JS Solution Demo

注意：如第1点所述，这当前隐藏了整个文档中该类的第一个元素。如果您想将其限制在display: none内该类的第一个元素，也可以这样做。

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

1 个答案:

基于CSS的解决方案：

基于Javascript的解决方案：