javascript - 使 仅在@media print 或按下 Ctrl+P 时可见

Question

我需要一个 HTML 分区 div ，它仅在给出打印时可见，即 Ctrl+P 被按下并且在正常情况下不可见页面浏览量

...

我试过下面的方法。但它不起作用。

有没有人知道

@media print {
            
      .print_only {
          display: block;
          visibility: visible;
      }
}

<div class="print_only" style="visibility:hidden; display:none"> THIS IS THE MOST DIFFICULT QUESTION OF THE CENTURY </div>

Answer 1

它不显示是因为内联样式 display:none 覆盖了为类 print_only 指定的样式。参见 this有关 CSS 特异性的详细信息的优秀文章。

你需要放

.print_only {
     display: none; 
} 

在您的 CSS 中(在 @media print block 之外)并从 HTML 中删除内联样式。