如何仅使用 CSS for Print 显示某些部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3463796/
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
How to only show certain parts with CSS for Print?
提问by Nathan H
I have a page with lots of data, tables and content. I want to make a print version that will only display very few selected things.
我有一个包含大量数据、表格和内容的页面。我想制作一个仅显示很少选定内容的打印版本。
Instead of writing another page just for printing, I was reading about CSS's feature for "@media print".
我没有为打印而编写另一页，而是在阅读 CSS 的“@media 打印”功能。
First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.
首先，哪些浏览器支持它？由于这是一个内部功能，如果只有最新的浏览器支持它就可以了。
I was thinking of tagging a few DOM elements with a "printable" class, and basically apply "display:none" to everything except those elements with the "printable" class. Is that doable?
我正在考虑使用“可打印”类标记一些 DOM 元素，并且基本上将“显示：无”应用于除具有“可打印”类的那些元素之外的所有内容。那可行吗？
How do I achieve this?
我如何实现这一目标？
EDIT: This is what I have so far:
编辑：这是我到目前为止：
<style type="text/css">
@media print {
* {display:none;}
.printable, .printable > * {display:block;}
}
</style>
But it hides everything. How do I make those "printable" elements visible?
但它隐藏了一切。如何使那些“可打印”元素可见？
EDIT: Trying now the negative approach
编辑：现在尝试消极的方法
<style type="text/css">
@media print {
body *:not(.printable *) {display:none;}
}
</style>
This looks good in theory, however it doesn't work. Maybe "not" doesn't support advanced css ...
这在理论上看起来不错，但它不起作用。也许“不”不支持高级 css ......
采纳答案by Strelok
Start here. But basically what you are thinking is the correct approach.
从这里开始。但基本上你在想的是正确的方法。
Thanks, Now my question is actually becoming: How do I apply CSS to a class AND ALL OF ITS DESCENDANT ELEMENTS? So that I can apply "display:block" to whatever is in the "printable" zones.
谢谢，现在我的问题实际上变成了：如何将 CSS 应用于类及其所有后代元素？这样我就可以将“display:block”应用于“可打印”区域中的任何内容。
If an element is set to display:none;all its children will be hidden as well. But in any case. If you want a style to apply to all children of something else, you do the following:
如果一个元素被设置为display:none;它的所有子元素也将被隐藏。但无论如何。如果您希望将样式应用于其他事物的所有子项，请执行以下操作：
.printable * {
display: block;
}
That would apply the style to all children of the "printable" zone.
这会将样式应用于“可打印”区域的所有子项。
回答by Polle
A simple way:
一个简单的方法：
<style>
.print-only{
display: none;
}
@media print {
.no-print {
display: none;
}
.print-only{
display: block;
}
}
</style>
回答by oleviolin
If you want to display some links etc. when in the browser, that you don't want to be printed. Furthermore you have some logos and letterhead info that only should go on the printed page. This seems to work fine:
如果你想在浏览器中显示一些链接等，你不想被打印。此外，您还有一些徽标和信头信息，它们只应出现在打印页面上。这似乎工作正常：
Example:
例子：
CSS:
CSS：
@media print {
.noPrint {
display:none;
}
}
@media screen {
.onlyPrint {
display: none;
}
}
HTML:
HTML：
<div class="noPrint" id="this_is_not_printed" >
<a href=links.html>
</div>
<div class="onlyPrint" id="this_is_only_seen_on_printer" >
<img scr=logo.png >
<img scr=letterhead.png >
</div>
回答by Rick Hellewell
I got here because I was curious about printing a chart generated by chart.js. I wanted to just print the chart directly from the page (with a button that does a 'window.print') without all of the other content of the page.
我来到这里是因为我对打印由 chart.js 生成的图表感到好奇。我只想直接从页面打印图表（带有一个执行“window.print”的按钮），而不需要页面的所有其他内容。
So, I got closer by using the technique from the answer here: Why can't I override display property applied via an asterisk?.
因此，我通过使用以下答案中的技术走得更近：为什么我不能覆盖通过星号应用的显示属性？.
You have to apply the 'asterisk' to the 'body' element, not just by itself. So, using the example CSS that the OP (Nathan) added to the question, I changed it to this:
您必须将“星号”应用于“主体”元素，而不仅仅是它本身。因此，使用 OP (Nathan) 添加到问题中的示例 CSS，我将其更改为：
<style type="text/css">
@media print {
body * {display:none;}
.printable, .printable > * {
display: block !important;
}
}
</style>
Then adding that 'printable' class to the chart itself, as in
然后将该“可打印”类添加到图表本身，如
<canvas id="myChart" class="printable" width="400" height="400"></canvas>
Which removed all page elements on the printed output except the chart when the 'print' button is clicked (via this):
当单击“打印”按钮时（通过此）删除了打印输出中除图表之外的所有页面元素：
<script>
myChart.render();
document.getElementById("printChart").addEventListener("click",function(){
window.print();
});
</script>
So, perhaps this will help anyone that gets to this question via the googles.
所以，也许这会帮助任何通过谷歌解决这个问题的人。
回答by pixparker
I suggest to hide the element that you won't print:
我建议隐藏您不会打印的元素：
HTML
HTML
<h1 class="no-print" >Welcome Just Screen</h1>
<div> I want print this section :)</div>
<div class="no-print">It's display only on screen</div>
CSS
CSS
@media print {
.no-print {
display: none;
}
}
回答by Daniel A. White
Nearly all browsers support it. It might be advantageous to use the mediaattribute on the linktag.
几乎所有浏览器都支持它。使用标签media上的属性可能是有利的link。
Using display: none;in some of your rules would be an appropriate way to handle your situation.
使用display: none;在你的一些规则是处理你的情况以适当的方式。
