使用 CSS 隐藏打印内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4816937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use CSS to hide contents on print
提问by Dziamid
I'm looking for an easy way to hide everything except a certain div and its contents.
我正在寻找一种简单的方法来隐藏除某个 div 及其内容之外的所有内容。
<html>
<head></head>
<body>
<div class="header">...</div>
<div class="menu">...</div>
<div class="content">...</div>
<div class="footer">...</div>
</body>.
</html>
So, for example, if I want to print only div.content, I would do it like this:
因此，例如，如果我只想打印div.content，我会这样做：
.header, .menu, .footer {
display: none;
}
And if the layout is complicated, it becomes messy. Is there an easier way to do this with CSS?
如果布局复杂，就会变得凌乱。有没有更简单的方法来用 CSS 做到这一点？
采纳答案by Dziamid
I did it css3 way: using not pseudo class and direct ancestors (children)
我用 css3 方式做到了：使用非伪类和直接祖先（子类）
/* 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;
}
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.
这样，即使在非常复杂的布局中，您也可以消除除要打印的内容之外的所有内容。:not 在这里非常有效，因为它会关心您将来对 html 的任何修改。
回答by Sarfraz
@media print {
.noPrint {
display:none;
}
}
Now you need to apply the class noPrintto the elements you want to hide in printing.
现在，您需要将该类noPrint应用于要在打印时隐藏的元素。
It is good practice to use a style sheet specifically for printing, and and set it's media attribute to print.
最好使用专门用于打印的样式表，并将其媒体属性设置为print.
Example:
例子：
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
回答by Tr1stan
Assign a separate CSS file that defines the behaviour when printing a web page.
分配一个单独的 CSS 文件来定义打印网页时的行为。
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
and then within that file just define:
然后在该文件中定义：
.header, .menu, .footer { display: none; }
回答by Thiago
You can use classes.
您可以使用类。
.classHide{display: none}
Depending on the language you are using, when if==true you can add a class to header, menu and footer.
根据您使用的语言，当 if==true 时，您可以向页眉、菜单和页脚添加一个类。
So you won't need to use another css file.
所以你不需要使用另一个 css 文件。
回答by RoToRa
Depending on your HTML structure (and browsers you need to support, because IE6 won't support this), you could hide all top-level divs and just show the one/few you want to show:
根据您的 HTML 结构（以及您需要支持的浏览器，因为 IE6 不支持此功能），您可以隐藏所有顶级 div，只显示您想要显示的一个/几个：
body > div {
display: none;
}
#content {
display: block;
}
