隐藏具有特定类的第一个 div [重复]

Posted 2023-03-06

【中文标题】隐藏具有特定类的第一个 div [重复]

【英文标题】：Hide the first div with specific class [duplicate]

【发布时间】：2014-09-25 12:34:24

【问题描述】：

我想隐藏 (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

【问题讨论】：

first-of-type 适用于元素而非类。 CSS 没有 first-of-class 类型的选择器。

在这种情况下是否可以选择使用 jQuery/javascript？

【参考方案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';

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

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

JS Solution Demo

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

【讨论】：

+1 也许还值得注意的是，这仅适用于兄弟姐妹，而不是整个页面上第一个发现的 .leftAddress 实例（就像 jquery 的 $(".leftAddress").first() 一样）跨度>

@xec：看准队友。这是我忽略的一件事，可能是因为用户在他的原始选择器中有fieldset .leftAddress...。

另一个旁注：document.querySelector(".leftAddress") 也可以 :) (IE8+)

@xec: 是的，但我相信通用兄弟选择器也适用于旧版本的 IE。

@Harry 您的解决方案对我有用。你帮了我很多。谢谢，我只使用了 css 解决方案。