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

Question

假设我得到以下结构:

<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.

Answer 1

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

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

值得注意的:not() 是IE9 +支持.

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

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

更新

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

作为嵌套元素可以有其他内容,隐藏在心里的一种适当的方式#le-main-id排除.le-main-class2是添加visibility: hidden到主容器中,并重新设置回visible的.le-main-class2.

然而,visibility离开占领的空间.但我们可以通过添加line-height: 0到主容器并重新设置值来1.2解决这个问题.le-main-class2.

在线示例.

* { 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>