如何使用 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.

我没有为打印而编写另一页，而是在阅读 CSS 的@media 打印"功能.

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 应用到阶级及其所有后代元素?以便我可以申请显示:阻止"到任何在可打印"区域.

如果一个元素被设置为 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 for Print 仅显示某些部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！