如何仅使用 CSS 显示某些部分以进行打印? [英] How to only show certain parts with CSS for Print?

问题描述

我有一个包含大量数据、表格和内容的页面.我想制作一个只显示极少数选定内容的打印版本.

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.

我没有为打印而写另一个页面，而是阅读了有关@media print"的 CSS 功能.

Instead of writing another page just for printing, I was reading about CSS's feature for "@media print".

首先，哪些浏览器支持它?由于这是一个内部功能，所以只要最新的浏览器支持它就可以了.

First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.

我正在考虑使用可打印"类标记一些 DOM 元素，并且基本上将显示:无"应用于除具有可打印"类的那些元素之外的所有内容.这可行吗?

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?

我如何做到这一点?

这是我目前所拥有的:

<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?

现在尝试消极的方法

<style type="text/css">
@media print {
    body *:not(.printable *) {display:none;}
}
</style>

这在理论上看起来不错，但它不起作用.也许不"不支持高级css ...

This looks good in theory, however it doesn't work. Maybe "not" doesn't support advanced css ...

推荐答案

开始这里.但基本上你所想的是正确的方法.

Start here. But basically what you are thinking is the correct approach.

谢谢，现在我的问题实际上是成为:如何将 CSS 应用于班级及其所有后代元素?这样我就可以申请显示:块"到任何在可打印"区域.

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.

如果一个元素设置为 display:none; 它的所有子元素也将被隐藏.但无论如何.如果您希望一种样式适用于其他事物的所有子项，请执行以下操作:

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:

.printable * {
   display: block;
}

这会将样式应用于可打印"区域的所有子项.

That would apply the style to all children of the "printable" zone.

这篇关于如何仅使用 CSS 显示某些部分以进行打印?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！