Question

我想隐藏页面上的所有元素，但只显示div.k1的内容。页面上还有更多元素。如何在纯CSS中做到这一点？

<div>1-this will hidden</div>
<div class="k1">
  2-this div will displayed
  <p>3-this will displayed</p>
  <p>4-this div will displayed</p>
  <div>
    5-this will displayed
    <p>6-this will displayed</p>
    <div>
      7-this will displayed
      <p>8-this will displayed</p>
    </div>
  </div>
</div>
<div>9-this will hidden</div>
<div>10-this will hidden</div>

<div>1-this will hidden</div>
<div class="k1">
  2-this div will displayed
  <p>3-this will displayed</p>
  <p>4-this div will displayed</p>
  <div>
    5-this will displayed
    <p>6-this will displayed</p>
    <div>
      7-this will displayed
      <p>8-this will displayed</p>
    </div>
  </div>
</div>
<div>9-this will hidden</div>
<div>10-this will hidden</div> 11,12,13..

Answer 1

如果您要隐藏的所有元素都是div，它们直接位于体内，则可以执行以下操作。

var items = document.querySelectorAll("body>div:not(.k1)");
for (var i = 0; i < items.length; i++) {
    items[i].style.display = 'none';
}

基本上，这是选择所有不具有类div的直接位于主体内的k1元素。然后对这些项目进行for循环，并将每个项目设置为不显示。

对于CSS解决方案，如果条件与我上面提到的相同，则可以执行类似的操作。

body>div:not(.k1) {
    display: none;
}

如果您有兴趣了解有关CSS选择器的更多信息，我建议您看看上面的W3 schools page。

Answer 2

这是嵌套最多2层深度的div的一种粗略方法（如您的示例）。如您在此处看到的那样，问题在于隐藏所有基于tagName（'div'）的div，除非它们具有className“ k1”或具有该className的div的子级。因此，在应用hidden属性之前，我们实际上必须至少检查3个条件。当然，如果需要，您可以通过添加parentNode.parentNode.parentNode ...来做得更深入。但是我几乎可以肯定的是，通过为要隐藏的元素分配一个类，并在要显示的元素上添加一个ID来实现此目的。这只是在不更改任何html的情况下完成工作的一种方法。

const allDivs = document.getElementsByTagName('div');

for (let i = 0; i < allDivs.length; i++) {
  if(allDivs[i].className !== "k1" && allDivs[i].parentNode.className !== "k1"){
    if (allDivs[i].parentNode.parentNode.className !== "k1"){
      allDivs[i].hidden = true;
    }
  }
};

<div class="k1">
    2-this div will displayed
    <p>3-this will displayed</p>
    <p>4-this div will displayed</p>
    <div>
        5-this will displayed
        <p>6-this will displayed</p>
        <div>
            7-this will displayed
            <p>8-this will displayed</p>
        </div>
    </div>
</div>
<div>9-this will hidden</div>
<div>10-this will hidden</div>

干杯！

隐藏页面的所有元素（特定div除外）

2 个答案: