隐藏具有特定类的第一个 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 selector for first element with class

Answer 1

基于 CSS 的解决方案：

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

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

解释：第一条规则将display 设置为none，用于所有字段集下具有.leftAddress 类的元素，然后第二条将display 设置为block具有.leftAddress 类的元素，该类也具有同一个类的先前兄弟。因此总的来说，类为.leftAddress 的第一个元素保持隐藏状态。

CSS Solution Demo

注意： 正如 cmets 中的 xec 所指出的，CSS 解决方案仅在用于同级元素时才有效。如果他们不是并且说在字段集中的包装器（另一个级别）中有一个带有class='leftAddress' 的元素，则字段集中的第一个.leftAddress 和字段集中包装器中的第一个.leftAddress 都将被隐藏（比如here)。

因此，从本质上说，它将具有该类的第一个元素隐藏在同一个父级中。

---

基于 Javascript 的解决方案：

如果你在使用 Javascript 来实现这个效果没有任何问题，你可以使用下面的代码来完成。此方案没有基于 CSS 的方案中提到的限制（示例可见here）。

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

1. document.getElementsByClassName('leftAddress')[0] - 获取 DOM 中类名为 leftAddress 的第一个元素。 [0] 是强制性的，因为 getElementsByClassName 返回一个节点列表（正如复数名称所暗示的那样），因此我们必须像处理任何数组一样引用它。

2. style.display = 'none' - CSS display: none 的 Javascript 等效项。

JS Solution Demo

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