html - 是否将除单个元素之外的所有内容都隐藏在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; }

值得注意的是:not() is supported in IE9+。

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

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

更新

根据new update，实际标记比以前发布的标记更复杂。

由于嵌套元素可能具有其他内容，一种隐藏#le-main-id中除.le-main-class2之外的所有内容的正确方法是将 visibility: hidden 添加到主容器中，然后将其重新设置回visible上的.le-main-class2。

但是， visibility 会保留占用的空间。但是我们可以通过在主容器中添加line-height: 0并将值重新设置为1.2上的.le-main-class2来解决此问题。

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>

关于html - 是否将除单个元素之外的所有内容都隐藏在div中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29727122/