如何使用CSS隐藏html页上除一个div以外的所有元素？
[英]How to hide all element on html page except one div using css?
问题描述
I was trying to hide all on an html expect for one <div> , as part of a bigger problem. 
我试图将所有<div> html <div>隐藏在html期望中，作为一个更大问题的一部分。 I have tried... 我努力了...
body * {
display: none;
}
#someTable, #someTable * {
display: block !important;
}
But It doesn't work. 但这行不通。 What am i doing wrong? 我究竟做错了什么？
4 个解决方案
解决方案1
4 已采纳 2015-10-12 18:51:06
You can use the pseudo-class ':not()' 您可以使用伪类'：not（）'
<style>
body *:not(.myDiv) {
display: none;
}
</style>
<div>1</div>
<div class="myDiv">2</div>
<div>3</div>
解决方案2
1 2015-10-12 18:21:06
A workaround would be to hide all elements using body * {display: none;} and show the element you want called #show and all it's children. 一种解决方法是使用body * {display: none;}隐藏所有元素body * {display: none;}并显示要调用的元素#show及其所有子元素。 #show, #show * {display: block;} . #show, #show * {display: block;} 。 since at this point the #show parent node is still hidden by the universal selector, we have to find all parents and show them too! 由于此时#show父节点仍被通用选择器隐藏，因此我们必须找到所有父节点并对其进行显示！ So: 所以：
var parentArray = $('#show').parents();
for (var i = 0; i < parentArray.length; i++) {
$(parentArray[i]).css('display', 'block');
}
解决方案3
1 2016-09-20 17:14:34
The trick is to hide all the first-level elements, and then re-display the parent container that you want: 技巧是隐藏所有第一级元素，然后重新显示所需的父容器：
@media print {
body > * {
display: none;
}
.parent {
display: block;
}
}
解决方案4
0 2015-10-12 18:12:28
Set body visibility to hidden also set #someTable element visibility to visible. 将身体可见性设置为隐藏，还将#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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.