隐藏除单嵌套Div以外的所有网页项目
假设我的网页有这样的结构：
<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 的路径进行硬编码，因为它可能会发生变化。
Suppose my web page has a struture like this:
<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>
I want to create a print CSS style that hides everything except for the contents of actual_content.
My first attempt was like this:
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 */
}
However, since there's no "display: auto" or "display: default", I mess up the styles of actual_content's items when I try to unhide them. I also don't like hard coding the path to actual_content since it might change.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我知道您的标签表明您需要 CSS 解决方案，但 PrintArea jQuery 插件非常适合您的需求：
http://plugins.jquery.com/project/PrintArea
I know your tags show you want a CSS solution, but the PrintArea jQuery plugin is perfect for your needs:
http://plugins.jquery.com/project/PrintArea
您需要通过设置
display:none进入并定位您不想单独显示的所有内容。如果您可以更改类名称等，则应该取消嵌套actual_content，然后将hide_div等类添加到其他中。这样它们就很容易关闭。You'll need to go in and target everything that you don't want to show up individually by setting
display:none. If you can change class names, etc, you should un-nest theactual_content <div>, then add classes likehide_divto the other<div>s so they're easy to turn off.在顶层 div 设置
visibility:hidden，然后在您想要设置visibility:visible的 div 上on the top level div set
visibility:hidden, then on the div you want setvisibility:visible您可能想要使用 可见性 属性。 W3Schools 描述了显示属性和可见性属性之间的区别：可见性属性会影响元素的可见性，但不会影响其结构，即它通常在页面上占据的空间。
You probably want to use the visibility property. W3Schools describes the difference between the display and visibility properties: the visibility property affects the visibility of an element without affecting its structure, i.e. the space it would normally occupy on the page.