使用CSS隐藏打印的内容 [英] Use CSS to hide contents on print
本文介绍了使用CSS隐藏打印的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找一种简单的方法来隐藏除了某个div及其内容之外的所有内容。
I’m looking for an easy way to hide everything except a certain div and its contents.
<html>
<head></head>
<body>
<div class="header">...</div>
<div class="menu">...</div>
<div class="content">...</div>
<div class="footer">...</div>
</body>.
</html>
例如，如果我只打印 div.content ，我会这样做：
So, for example, if I want to print only div.content, I would do it like this:
.header, .menu, .footer {
display: none;
}
如果布局很复杂，
推荐答案
我做了css3方式：使用不伪类和直接祖先儿童）
I did it css3 way: using not pseudo class and direct ancestors (children)
/* hide all children of body that are not #container */
body > *:not(#container) {
display: none;
}
/* hide all children of #container that are not #content */
#container > *:not(#content) {
display: none;
}
/* and so on, until you reach a div that you want to print */
#content > *:not(#print_me) {
display: none;
}
这种方式可以消除一切，布局。 ：在这里不是非常有效，因为它关心任何未来的修改你的html。
This way you can eliminate everything except what you want to print even in very complex layouts. :not is very efficient here because it takes care about any future modifications of you html.
这篇关于使用CSS隐藏打印的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
