Question

我需要一个HTML分区div，只有在给出打印时才可见，即 Ctrl + P 被按下而在正常页面视图中不可见< / p>

...

我尝试了以下方法。但它没有用。

有没有人了解它

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

你需要把

.print_only {
     display: none; 
}

在CSS中（@media print块之外）并从HTML中删除内联样式。

Answer 2

你需要在显示后放置！important：block;。内联样式会覆盖类的样式。你也可以这样做：

.print_only {
    display: none;
}

希望它可以帮到你！

Answer 3

我是用这种方法做的....谢谢大家...特别是@pokeybit

.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;
            }
        }

仅在@media打印或按下Ctrl + P时才能使<div>可见

3 个答案: