打印 CSS 选择器匹配除一个元素之外的所有元素

我有一个包含多个div的页面。在此页面中，有一个带有特定类的div打印This。所以例如：

<html>
  <body>
    <div id="title">Hello</div>
    <div class="printThis">Help</div>
    <div class="printThis">Me</div>
    <div id="bottomPage">About me</div>
  </body>
</html>

现在在我的@media打印中，我正在使用：

.printThis {
  display: none;
}
@media print {
  @page {
    size: A4 potrait;
    margin: 0;
  }
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100vw;
    width: 100vw;
    background-color: #fff;
  }
  body *:not(.printThis) {
    display: none;
  }
  body div.printThis {
    display: block;
  }
}

.printThis类设置为正常display: none，但在我的打印 css 中，它设置为 display:block .问题是，当我打印时，我得到一个空白页。有没有办法进行这种打印并允许每个具有 printThis 类的div 在自己的页面上打印？

非常感谢。

您的代码可以完美地工作，就像为打印功能而编写的那样，但是您缺少的是分页符。更改：

body div.printThis {
    display: block;
}

自：

body div.printThis {
    display: block;
    page-break-after: always;
}

这将使每个<div class="printThis">thing</div>都显示在自己的页面上。

相关内容

最新更新

热门标签：