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

Question

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

/* Remove unwanted elements */

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

/* Ensure the content spans the full width */

container, #container2, #content { width: 100%; margin: 0; float: none; }

/* Change text colour to black (useful for light text on a darkbackground) */.lighttext { color: #000 }

/* Improve colour contrast of links #781351 */a:link, a:visited {color: #000 }

我理解这是如何使 display: none 对于我不想在页面上打印的元素。我的问题是:我怎样才能做相反的事情？如果页面上有一些元素我只想在页面打印时可见，而在查看页面时不可见，我该怎么办？

有什么想法吗？谢谢。

Answer 1

简单的说

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

进入您的 CSS 规则。