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 =＆＃34; le-main-id2＆＃34; class =＆＃34; le-main-class2＆＃34;），但我可以＆＃ 39; t只是继续使用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() 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>

Answer 2

CSS3 :not选择器完全适合这种情况：

.p > div:not(#c2) {
  display: none;
}

<div class="p">
  <div id="c1">1</div>
  <div id="c2">2</div>
  <div id="c3">3</div>
</div>

Answer 3

这里是一种JavaScript方法，用于隐藏除具有给定id的元素及其内容以外的所有内容。为此，它也不能隐藏父元素。

function hideExcept(el, id) {
    console.log(el.nodeName);
    var isgood = Array.from(el.children).reduce((a,c)=>{
        if (c.id == id){ // note you may want to filter by class or something here
            return true
        }
        return a || hideExcept(c, id)

    }, false)

    if (!isgood) {
        el.style.display = 'none'
    }
    return isgood
}

hideExcept(document, 'anyID') // put the id of the element where 'anyID' is

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

3 个答案:

更新