css - 不显示打印元素

Question

我有一些带有已display:none设置文本的 div。在屏幕上，我有一个功能可以display:block在我单击其他元素时将其更改为。

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

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

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

文档打印版本的所有样式都很好用，除了这个。使其可打印的最佳方法是什么？

score 2 · Accepted Answer

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

这样的事情可能会奏效：

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

尽管!important与 CSS 的特殊性无关，但 MDN 在其文章中有一节讨论!important.

当 !important 规则用于样式声明时，此声明将覆盖 CSS 中的任何其他声明，无论它在声明列表中的什么位置。虽然， !important 与特异性无关。

score 0 · Accepted Answer

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

2 回答 2