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

【问题标题】：External print.css file - How to make element visible on print only, not visible on screen?外部 print.css 文件 - 如何使元素仅在打印时可见，在屏幕上不可见？
【发布时间】：2011-12-17 21:05:29
【问题描述】：

我目前使用以下作为我的外部 print.css 文件：

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

hiddenedit, #hiddenbuttons, #header, #nav, .propertyselector, li.hiddentab, ul.hiddentab { display: none; }

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

容器，#container2，#content { 宽度：100%;边距：0；浮动：无； }

/* 将文本颜色更改为黑色（对于深色文本中的浅色文本很有用背景） */ .lighttext { 颜色：#000 }

/* 提高链接的颜色对比度 #781351 */ 一个：链接，一个：访问{ 颜色：#000 }

我了解这是如何显示的：对于我不想在页面上打印的项目没有。我的问题是：我该如何做相反的事情？如果页面上有一些元素我只想在页面打印时可见，而在查看页面时不可见，我该怎么办？

有什么想法吗？谢谢。

【问题讨论】：

标签： css print-css

【解决方案1】：

比起 phihag 的代码，我更喜欢以下代码，因为您也可以将其应用于其他块元素

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

【讨论】：

【解决方案2】：

在线样式表显示为隐藏，打印 css 表显示。你是这个意思吗？您必须为其分配 div。

【讨论】：

是的，我想这就是我想要的。为什么要使用 div 呢？

【解决方案3】：

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

【讨论】：

“在我的屏幕 css 文件中”是什么意思？你的意思是页面本身的css？

【解决方案4】：

简单地说

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

进入你的 CSS 规则。

【讨论】：