打印时从css中删除某些样式

Question

我打算用 HTML 重新创建一个文档。 Thai 已经全部启动并运行我的问题是我想在页面生成后打印它但是我想删除一些应用于显示视图的 css 样式。到目前为止我有这个......

    .containerouter {
    margin:0 auto;
    width:21cm;
    height:29.7cm;
    padding-left:1.7cm;
    padding-right:1.7cm;
    padding-bottom:1.7cm;
    -webkit-box-shadow: -4px 2px 22px 3px rgba(0,0,0,0.19);
    -moz-box-shadow: -4px 2px 22px 3px rgba(0,0,0,0.19);
    box-shadow: -4px 2px 22px 3px rgba(0,0,0,0.19);
}

    @media print{.no-print, .no-print *{display: none !important;}}

<div class="containerouter no-print" media="print"> CONTENT NESTED INSIDE THIS DIV NEEDS TO BE PRINTED </div>

基本上我想删除阴影属性而不删除已经应用的尺寸格式。 当前发生的情况是单击打印时所有内容都消失了

Answer 1

有一个媒体类，用于打印时添加类：

@media print {
   [CSS only shown when printing]
}

如果你想删除一些 CSS 样式，你可以这样做：

@media print {
     .containerouter {
         box-shadow: none;
     }
}

您只需要在定义类之后声明@media print，以便您的媒体类获得更高的特异性。