Question

我试图隐藏一个<div>的html期望值，这是一个更大问题的一部分。我试过......

body * {
  display: none;
}
#someTable, #someTable * {
  display: block !important;
}

但它没有用。我做错了什么？

Answer 1

您可以使用伪类'：not（）'

<style>
   body *:not(.myDiv) {
        display: none;
    }
</style>


<div>1</div>
<div class="myDiv">2</div>
<div>3</div>

Answer 2

解决方法是使用body * {display: none;}隐藏所有元素，并显示您想要的名为#show的元素及其所有元素。 #show, #show * {display: block;}。因为此时#show父节点仍被通用选择器隐藏，我们必须找到所有父节点并显示它们！所以：

var parentArray = $('#show').parents();
for (var i = 0; i < parentArray.length; i++) {
    $(parentArray[i]).css('display', 'block');
}

Answer 3

诀窍是隐藏所有第一级元素，然后重新显示所需的父容器：

@media print {
    body > * {
        display: none;
    }

    .parent {
        display: block;
    }
}

Answer 4

将正文可见性设置为隐藏也将#someTable元素可见性设置为可见。

body {
  visibility: hidden;  
}

#someTable {
  visibility: visible;  
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div>To Be HIdden
  <div id="someTable">To Be Shown</div>
</div>
</body>
</html>

如何使用css隐藏除一个div之外的html页面上的所有元素？

4 个答案: