如何仅使用CSS for Print显示某些部分？

Question

我的页面上有很多数据，表格和内容。我想制作一个仅显示很少的选定内容的印刷版本。

我不是在写另一个仅用于打印的页面，而是在阅读CSS的“ @media print”功能。

首先，哪些浏览器支持它？由于这是一项内部功能，因此只有最新的浏览器支持它才可以。

我当时正在考虑使用“可打印”类标记一些DOM元素，并且基本上将“ display：none”应用于除具有“可打印”类的那些元素之外的所有内容。那可行吗？

我该如何实现？

编辑：这是我到目前为止：

<style type="text/css">
@media print {
    * {display:none;}
    .printable, .printable > * {display:block;}
}
</style>

但这掩盖了一切。如何使那些“可打印”元素可见？

编辑：现在尝试否定方法

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

从理论上讲，这看起来不错，但是却行不通。也许“不”不支持高级CSS …

Answer 1

从这里开始。但基本上您在想的是正确的方法。

谢谢，现在我的问题实际上正在变成：如何将CSS应用于类及其所有后代元素？这样我就可以将“ display：block”应用于“可打印”区域中的任何内容。

如果将元素设置为display:none;所有元素，则所有子元素也将被隐藏。但是无论如何。如果您希望将样式应用于其他样式的所有子样式，请执行以下操作：

.printable * {
   display: block;
}

这会将样式应用于“可打印”区域的所有子项。