打印元素未显示

Question

我有一些文本设置为display:none的div。在屏幕上，我有一个功能，当我点击其他元素时，它会将其更改为display:block。

<div class="hiddenText" style="display:none">My hidden text</div>

我需要打印页面并显示所有文字。我添加了用于打印的css文件和用于隐藏文本的指定显示

@media print {
   .hiddenText {
       display: block
   }
}

除此之外，文档打印版本的所有样式都很有效。什么是使其可打印的最佳方式？

Answer 1

您的内联样式优先于其他地方指定的规则。要覆盖内联样式，您可以使用!important关键字强制执行规则。

这样的事情可能会起到作用：

@media print {
   .hiddenText {
       display: block !important;
   }
}

即使!important与CSS特异性无关，但MDN在its article on the topic中有一个讨论!important的部分。

  

当样式声明使用！important规则时，这个   声明覆盖CSS中的任何其他声明，无论在何处   它在声明列表中。虽然，！重要无关   具有特异性。

Answer 2

而不是@media print尝试将打印样式放在<LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="foo.css">

中