假设我的网页有这样的结构:
<body>
<div id="fee">
<div id="fi">
<div id="actual_content">
<p>Content</p>
<div id="some_important_stuff">Blah</div>
<p>More content</p>
<span class="and_another_thing">Meh</span>
...
</div>
<div id="fo>
...
</div>
...
</div>
<div id="fum">
...
</div>
...
</div>
<div id="fazz">
...
</div>
...
</body>
我想创建一个打印 CSS 样式，它隐藏除 actual_content 内容之外的所有内容。
我的第一次尝试是这样的:
body * {
display: none; /* Hide everything first */
}
/* Show content div and all of its ancestors */
body > #fee {
display: block;
}
body > #fee > #fi {
display: block;
}
body > #fee > #fi > #actual_content {
display: block;
}
/* Unhide contents of #actual_content */
#actual_content * {
display: block; /* Not ideal */
}
但是，由于没有“display: auto”或“display: default”，当我试图取消隐藏时，我弄乱了 actual_content 元素的样式。我也不喜欢对 actual_content 的路径进行硬编码，因为它可能会改变。
最佳答案
您可能想使用 visibility 属性。 W3Schools describes display 和 visibility 属性之间的区别:visibility 属性影响元素的可见性而不影响其结构，即它通常在页面上占据的空间。
关于css - 隐藏除单个嵌套 div 之外的所有网页元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7407213/