如何在不可打印的 div 中使 div 可打印

Question

使用下面的示例代码，我如何使具有 id="print" 的 div 成为唯一可打印的内容，而不必使每个单独的项目不可打印。目标是在“内容”div 上保留 class="d-print-none"，但能够使“打印”div 可打印。

我想用 scss 执行此操作，以便无论您使用的是 window.print() 还是浏览器的打印功能，打印都能正确显示

<div id="content" class="d-print-none">
    <div>Some Text</div>
    <some-component></some-component>
    <div>Something Else</div>
    <some-other-component></some-other-component>
    <more-components></more-components>
    <div id="print">Some print stuff
        <some-print-component></some-print-component>
    </div>
    <div>More non-printable stuff</div>
    <non-printable-component></non-printable-component>
</div>

Answer 1

将#content 上的所有子元素设置为不可打印，#print 除外：

@media print {
  #content > *:not(#print) {
    display: none; 
  }
}

如果#print不在#content的正下方，你应该这样做：

@media print {
  #content * {
    display: none;
  }

  #content #print, #content #print * {
    display: block; /* Change as necessary */
  }
}

或者，在一个规则中：

@media print {
  #content *:not(#print, #print *) {
    display: none; 
  }
}