css - 如何只打印特定页面部分？

Question

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

页面.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>

打印.css:

.donotprint {
  display: none;
}

然后包括<link rel="stylesheet" type="text/css" media="print" href="print.css" />施展魔法。

但是我正在做一个相当繁重的元素，我不想到处都用 donotprint 类污染代码。所以我想指定我想要打印的内容，而不是指定我不想打印的内容。所以在我的例子中它会是这样的:

页面.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;也会影响 child ，因此不会打印任何内容(好吧，空的 <div class = "section2 print"></div> 是)。

那么 CSS 允许这种事情吗？如果是这样，怎么做到的？

Answer 1

您可以将 * 选择器与直接子 > 结合使用

.main > * {       /* Basically the sections */
  display: none; 
}

.main > .print {
  display: initial;
}

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