外部print.css文件 - 如何使元素仅在打印时可见，在屏幕上不可见？

Question

我目前正在使用以下内容作为外部print.css文件：

  

/ *删除不需要的元素* /

     

hiddenedit，＃hiddenbuttons，＃header，＃nav，.propertyselector，li.hiddentab，ul.hiddentab {display：none; }

     

/ *确保内容跨越整个宽度* /

     

container，＃container2，＃content {width：100％;保证金：0; float：none; }

     

/ *将文字颜色更改为黑色（适用于黑暗的浅色文字）   背景） */   .lighttext {color：＃000}

     

/ *提高链接的色彩对比度＃781351 * /   a：链接，a：已访问{   颜色：＃000}

我理解这对于我不想在页面上打印的项目如何显示：none。我的问题是：我该怎么做呢？如果页面上有元素我只想在页面打印时可见，在查看页面时不可见，我该怎么办？

有什么想法吗？谢谢。

Answer 1

简单地说

.onlyprint {display: none;}
@media print {
  .onlyprint {display: block;}
}

进入CSS规则。

Answer 2

当然，在您的屏幕css文件中完全相反...将您想隐藏的项目设置为display: none，然后获取print.css以显示它们。

Answer 3

你可以将在线样式表说成隐藏，然后打印css表说明显示。你是这个意思吗？你必须为它分配div。

Answer 4

与phihag的代码相比，我更喜欢以下代码，因为您还可以将其应用于其他然后是块元素

@media not print {
  .only-print {display: none!important;}
}
@media print {
  .only-not-print {display: none!important;}
}