我的页面上有很多数据,表格和内容。我想制作一个仅显示很少的选定内容的印刷版本。
我不是在写另一个仅用于打印的页面,而是在阅读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 …
从这里开始。但基本上您在想的是正确的方法。
谢谢,现在我的问题实际上正在变成:如何将CSS应用于类及其所有后代元素?这样我就可以将“ display:block”应用于“可打印”区域中的任何内容。
如果将元素设置为display:none;所有元素,则所有子元素也将被隐藏。但是无论如何。如果您希望将样式应用于其他样式的所有子样式,请执行以下操作:
display:none;
.printable * { display: block; }
这会将样式应用于“可打印”区域的所有子项。