<div> 仅在打印@media或按 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指定的样式。有关CSS特性的详细信息，请参阅这篇优秀的文章。

你需要放置

.print_only {
display: none; 
} 

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

Answer 2

您需要放入！显示后很重要：块；。内联样式覆盖类上的样式。你也可以这样做：

.print_only {
display: none;
}

希望它能帮助你！

Answer 3

我用这个方法。。。。谢谢大家。。。尤其是@pokebit

.print_only {
display: none;
}

@media print {


.print_only {
display: block;
visibility: visible;
}

body * {
visibility: hidden;
}
#print_area, #print_area * {
visibility: visible;
}
#print_area {
position: absolute;
left: 0;
top: -100px;
}
}