Question

我知道，为了防止某些页面部件被打印，我们可以添加一个类，并告诉CSS我们不希望打印该类中的元素。例如：

page.html：

<div class="main">
<div class = "section1 donotprint">
  <p>Hey, I'm not printed. Poor me.</p>
</div>
<div class = "section2">
  <p>Hey, I am printed! Lucky me!</p>
</div>

print.css：

.donotprint {
  display: none;
}

然后加上<link rel="stylesheet" type="text/css" media="print" href="print.css" />就可以了。

但是我正在做一个非常繁重的项目，我不想在任何地方都使用 donotprint 类污染代码。因此，我想指定我要打印的内容，而不是指定我不想打印的内容。因此在我的示例中将是这样：

page.html：

<div class="main">
<div class = "section1">
  <p>Hey, I'm not printed. Poor me.</p>
</div>
<div class = "section2 print">
  <p>Hey, I am printed! Lucky me!</p>
</div>

我尝试过:not(.print) {display: none;}，但是display: none;也会影响孩子，所以什么也不会打印（嗯，空的<div class = "section2 print"></div>是）。

那么CSS允许这种事情吗？如果可以，怎么办？

Answer 1

您可以结合使用/home选择器和直属子项*

上面的方法不像专门定义要隐藏的内容那样灵活-因为它仅适用于直子。

Answer 2

您可以将所有不想打印的内容放入print.css文件中，这不限于一个类。例如，您可以在print.css文件中添加类似nav, header, main, footer {display: none}之类的内容，以阻止这些元素的打印。

然后将display：block设置为要打印的所有内容。

您还可以更改所有其他属性，例如颜色/字体大小，间距......

如何仅打印特定页面部分？

2 个答案: