html – 除了单个元素之外,隐藏div中的所有内容？

发布时间：2020-12-14 22:29:42 所属栏目：资源来源：网络整理

导读：假设我得到以下结构： div id="le-main-id" class="le-main-class" div id="le-main-id1" class="le-main-class1"/div div id="le-main-id2" class="le-main-class2"/div div id="le-main-id3" class="le-main-class3"/div/div 我需要隐藏所有内容,除了div编

假设我得到以下结构：

<div id="le-main-id" class="le-main-class">
  <div id="le-main-id1" class="le-main-class1"></div>
  <div id="le-main-id2" class="le-main-class2"></div>
  <div id="le-main-id3" class="le-main-class3"></div>
</div>

我需要隐藏所有内容,除了div编号2(id =“le-main-id2”class =“le-main-class2”),但是我不能只使用display：none,因为在我的真实代码我得到了40个div来隐藏,所以它可能需要太长时间才会结束.

所以我怎么能隐藏除第二个div之外的所有东西？

像这样的东西

#le-main-id.le-main-class2 { /* visible:yes; all the others: no; */}
#le-main-id { /* visible:no; */}

更新：
我按照答案,但它不起作用.这是我正在尝试的方式：

#lehometemplates > :not (.wpbdp-field-title) {
display: none !important;
}

更新2：
我相信我没有100％提出这个问题,即使目前的答案确实有帮助.让我说清楚一下：

假设这就是我所拥有的：

<div id="le-main-id" class="le-main-class">
 <div id="1" class="1">
  <div id="2" class="2"> 
   <div id="3" class="3"> 
    <div id="4" class="4">

          <div id="le-main-id1" class="le-main-class1">
            <div id="le-main-id1" class="le-main-class1"></div>
            <div id="le-main-id2" class="le-main-class2"></div>
            <div id="le-main-id3" class="le-main-class3"></div>
          </div>

    </div>
   </div>
  </div>
 </div>
</div>

所以要隐藏所有内容并保持div class =“le-main-class2”我将使用类似……

#le-main-id > :not (.le-main-class2)  {
    display: none !important;
    }

这样对吗？

看,我只是不想首先选择每个父div,如果可能的话.

最后更新

最后成功了,如果我有以下代码：

<div id="le-main-id" class="le-main-class">
 <div id="1" class="1">
  <div id="2" class="2"> 
   <div id="3" class="3"> 
    <div id="4" class="4">

          <div id="le-main-id111" class="le-main-class111">
            <div id="le-main-id1" class="le-main-class1"></div>
            <div id="le-main-id2" class="le-main-class2"></div>
            <div id="le-main-id3" class="le-main-class3"></div>
          </div>

    </div>
   </div>
  </div>
 </div>
</div>

那我所要做的就是：

.le-main-class .le-main-class111 > :not(.le-main-class2) {
  display: none;
}

这样我就会隐藏.le-main-class和.le-main-class111的每个子节点,除了.le-main-class2.

解决方法

你可以使用 :not()伪类：

#le-main-id > :not(.le-main-class2) { display: none; }

值得注意的是：不是()is supported in IE9+.

对于旧版Web浏览器,您可以隐藏所有子项< div> s,然后覆盖特定项的声明.

#le-main-id > div { display: none; }
#le-main-id > .le-main-class2 { display: block; }

更新

根据new update,实际标记比之前发布的标记更复杂.

由于嵌套元素可能包含其他内容,因此除了.le-main-class2之外,隐藏#le-main-id内部所有内容的一种正确方法是将visibility: hidden添加到主容器中并将其重新设置为.le-main上的可见内容-class2.

但是,visibility离开了被占领的空间.但是我们可以通过在主容器中添加line-height：0并在.le-main-class2上将值重新设置为1.2来解决这个问题.

Online Example.

* { margin: 0; /* just for demo */ }

#le-main-id {
  visibility: hidden;
  line-height: 0;
  
  background-color: gold;
}

#le-main-id img {
  display: none; /* to hide the images */
}

#le-main-id .le-main-class2 {
  visibility: visible;
  line-height: 1.2;
  
  background-color: orange;
}

<div id="le-main-id" class="le-main-class">
  .le-main-class
 <div id="1" class="1"> id="1" class="1"
  <div id="2" class="2"> id="2" class="2"
   <div id="3" class="3"> id="3" class="3"
    <div id="4" class="4"> id="4" class="4"
      <img src="http://placehold.it/100" alt="">

          <div id="le-main-id1" class="le-main-class1">
            .le-main-class1
            <div id="le-main-id1" class="le-main-class1">.le-main-class1</div>
            <div id="le-main-id2" class="le-main-class2">.le-main-class2</div>
            <div id="le-main-id3" class="le-main-class3">.le-main-class3</div>
          </div>

    </div>
   </div>
  </div>
 </div>
</div>

<p>
  The rest of the document....
  Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis soluta in vel libero dicta similique dolore modi quidem deserunt numquam neque,quo excepturi atque autem,aspernatur consequuntur mollitia,officia aut.
</p>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!