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

Question

<分区>

Answer 1

基于 CSS 的解决方案:

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

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

说明:第一条规则将 display 设置为 none 为 .leftAddress 类下的所有元素fieldset 然后第二个将 display 设置为 block 用于所有具有 .leftAddress 类的元素，该类也有一个具有相同类的先行兄弟。因此，总的来说，类为 .leftAddress 的第一个元素仍然隐藏。

CSS Solution Demo

注意:正如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' - JavaScript 等效于 CSS display: none。

JS Solution Demo

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