如何使用CSS仅显示某些部分进行打印？

我有一个包含大量数据、表格和内容的页面。 我想制作一个打印版本，只显示很少的选定内容

我读到了CSS的“@media print”功能，而不是仅仅为了打印而写另一个页面

首先，什么浏览器支持它？因为这是一个内部特性，所以只要最新的浏览器支持它就可以了

我在考虑用一个“可打印”类标记一些DOM元素，并基本上对所有元素应用“display:none”，除了那些使用“可打印”类的元素。 这可行吗

我如何做到这一点

编辑： 这就是我到目前为止所做的：

<style type="text/css">
@media print {
    * {display:none;}
    .printable, .printable > * {display:block;}
}
</style>

@媒体印刷品{
*{显示：无；}
.printable.printable>*{display:block；}
}

但它隐藏了一切。如何使这些“可打印”元素可见

编辑： 现在尝试消极的方法

<style type="text/css">
@media print {
    body *:not(.printable *) {display:none;}
}
</style>

@媒体印刷品{
正文*：非（.printable*）{display:none；}
}

这在理论上看起来不错，但它不起作用。可能“not”不支持高级css…

开始。但基本上你所想的是正确的方法

---

谢谢，现在我的问题是 成为：如何将CSS应用于 类及其所有后代 元素？这样我就可以申请了 “显示：阻止”到 “可打印”区域

如果元素设置为

显示：无其所有子项也将隐藏。但无论如何。如果要将样式应用于其他对象的所有子对象，请执行以下操作：

.printable * {
   display: block;
}

这会将样式应用于“可打印”区域的所有子项。
几乎所有浏览器都支持该样式。在
链接
标记上使用
媒体
属性可能是有利的

使用
显示：无在您的某些规则中是处理您的情况的适当方法。
一个简单的方法：

<style>
    .print-only{
        display: none;
    }

    @media print {
        .no-print {
            display: none;
        }

        .print-only{
            display: block;
        }
}
</style>


.仅打印{
显示：无；
}
@媒体印刷品{
1.不打印{
显示：无；
}
.仅打印{
显示：块；
}
}
我之所以来到这里，是因为我想打印chart.js生成的图表。我只想直接从页面打印图表（带有一个“window.print”按钮），而不需要页面的所有其他内容

因此，我通过使用下面答案中的技巧更进一步：

您必须将“星号”应用于“body”元素，而不仅仅是它本身。因此，使用OP（Nathan）添加到问题中的示例CSS，我将其更改为：

<style type="text/css">
@media print {
    body * {display:none;}
    .printable, .printable > * {
    display: block !important;
  }
}
</style>


@媒体印刷品{
正文*{显示：无；}
.printable，.printable>*{
显示：块！重要；
}
}

然后将“可打印”类添加到图表本身，如

<canvas id="myChart" class="printable" width="400" height="400"></canvas>



单击“打印”按钮（通过此按钮）时，删除了打印输出上除图表以外的所有页面元素：


myChart.render（）；
document.getElementById（“printChart”）.addEventListener（“单击”，函数）（）{
window.print（）；
});     

因此，这可能会帮助任何通过谷歌找到这个问题的人。
我建议隐藏您不会打印的元素：

HTML

如果要在浏览器中显示某些链接等，则不希望打印。此外，你有一些标志和信头信息，只应在打印页面上。
这似乎很管用：

例子：
CSS:
HTML:

谢谢，现在我的问题是：如何将CSS应用于类及其所有子元素？这样我就可以将“显示：块”应用于“可打印”区域中的任何内容。我认为您应该从另一边接近它。隐藏不需要打印的内容，而不是隐藏所有内容，只显示要打印的部分。因为它实际上不可能在CSS中以一种干净的方式实现。它实际上可以按照@Strelok建议的方式实现：您可以将不应该包含在打印中的所有元素标记为“无打印”，避免将您真正想要的元素标记为容器。没有打印{display:none:}但它确实很愚蠢。你想要的方式是干净和聪明。但可悲的是，这似乎是唯一的办法。希望不是这样。您要做的是为父css选择器提供一个很好的用例：您可以说：{display:none；}.printable、.printable<*{display:block}很遗憾选择器不存在。谢谢，这几乎是完美的！现在唯一的问题是，并非所有元素都应该是“块”。当我进行测试时，我意识到div是“块”，常规内容是“内联”，表是“表”，tbody是“表行组”，tr是“表行”，等等。。。我可以分别为每个元素添加规则，但有没有一种方法可以只说“应用常规浏览器样式”？这是正确的，但如果.print only元素是自然内联的（例如），则可能会导致格式不必要的中断而不是块。为什么你有两个
@
？我猜
@
是一个打字错误。我认为“diply:block”会破坏一些具有另一种显示类型的元素。使用
@媒体打印
和
@媒体屏幕
为我解决了这个问题。Thx.this隐藏所有元素，但不向所有元素及其子元素显示块。我有完全相同的CSST。这是一个更老的答案，当我在2017年使用它时，代码工作正常。应该还能用。脚本是一个单独的按钮，ID为“printChart”；我的回答中没有显示该代码。我相信CSS第4行中的星号应该允许“printable”类的任何子元素都是可打印的。（我的回答中缺少了一个结束式命令；我刚才添加了它。）没关系，我想它不应该改变那么多。我现在拥有的是非常相似的，我点击一个按钮，触发window.print功能。唯一的问题是，当我看这一页时，它是空白的。我正在使用ASP.Net，它
<script>
    myChart.render();
    document.getElementById("printChart").addEventListener("click",function(){
        window.print();
    });     
</script>

<h1 class="no-print" >Welcome Just Screen</h1>
<div> I want print this section :)</div>
<div class="no-print">It's display only on screen</div>

@media print {     
    .no-print {
        display: none;
    }
}

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

<div class="noPrint" id="this_is_not_printed"  >
   <a href=links.html>
</div>
<div class="onlyPrint"  id="this_is_only_seen_on_printer" >
   <img scr=logo.png >
   <img scr=letterhead.png >
</div>