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

Question

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

/* 删除不需要的元素 */ hiddenedit，#hiddenbuttons，#header，#nav，.propertyselector，li.hiddentab，ul.hiddentab {display: none;}

/* 确保内容跨越整个宽度 */ container，#container2，#content {width: 100％; margin: 0; float: none;}

/* 将文本颜色更改为黑色（对于深色背景上的浅色文本非常有用）*/ .lighttext {color: #000;}

/* 提高链接的颜色对比度 #781351 */ a：link，a：visited {color: #000;}

我理解这样可以使得我不想在页面上打印的项目的显示为none。我的问题是：如果页面上有一些元素只想在页面打印时可见，而在查看页面时不可见，我该怎么做？

有什么想法吗？谢谢。

- DanielAttard

Answer 1

简单来说，

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

将其添加到您的 CSS 规则中。

- phihag

Answer 2

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

- Michael Willmott

---

你所说的“在我的屏幕CSS文件中”是什么意思？你是指页面本身中的CSS吗？ - DanielAttard

Answer 3

您想让在线样式表保持隐藏，而打印CSS样式表则显示。这是您的意思吗？您需要为其分配div。

- benteh

---

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

Answer 4

我更喜欢以下代码而不是phihag的代码，因为你也可以将其应用于其他非块元素。

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

- Richard Burkhardt