时间戳

首页 > 解决方案 > 如何仅打印特定页面部分？

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

问题描述

我知道为了防止打印某些页面部分，我们可以添加一个类并告诉 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>

打印.css：

.donotprint {
  display: none;
}

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

但是我正在做一个非常繁重的项目，我不想到处都用不打印类来污染代码。所以我想指定我想要打印的内容，而不是指定我不想打印的内容。所以在我的例子中，它会是这样的：

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允许这种事情吗？如果是这样，怎么办？

标签： css

解决方案

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

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

.main > .print {
  display: initial;
}

上面的内容不像专门定义要隐藏的内容那样灵活——因为它只适用于直系孩子。

推荐阅读