隐藏容器，但显示内容

Question

我试图快速创建一个打印样式表，在这里我希望从打印中删除一个元素，但仍然强制一个子元素。

<div class="container print-hide">
   <p class="content print-show">
      Some content
   </p>
</div>

我希望CSS大师有一个比我更好的想法。在本例中，我希望去掉元素的所有样式(在本例中是容器)，但仍然显示嵌套元素(内容)。

@media print {
   .print-hide { display:none; }
   .print-show { /* magic */ }
}
@media screen {
}

我只能快速地想到三种方法，它们都是不想要的：

1. 在HTML中嵌入双倍内容。使用具有类打印显示的嵌套元素显示它们的呈现位置，并将它们隐藏在屏幕视图中。
2. 使用JS并在新窗口/ iframe中打开内容，去掉要打印的元素。
3. 不要使用类并删除CSS中我不喜欢的部分：@media print{ .container { /*删除不需要的样式*/ }}

Answer 1

那不管用。不过，你可以做一些特别的把戏。

如果container有背景，则可以使背景透明。您可以以类似的方式“撤消”其他样式。

如果container有其他内容，您可以将该内容包装在spans或div中，并隐藏这些内容。如果它只包含文本，则可以生成font-size: 0，并将font-size of content设置为特定大小(默认情况下为1rem )。

但是，所有这些可能性都只是工作环境，因为你不能在保持孩子可见的同时隐藏父母，所以基本上我认为option 3是你最好的选择。