隐藏容器，但显示内容

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 {
}

---

我只能很快想到3种方法，所有方法都是不可取的：

1. 在HTML中嵌入双倍内容。使用嵌套元素显示类 print-show ，然后在屏幕视图中隐藏它们。

2. 使用JS并在新窗口/ iframe中打开内容，删除我们要打印的元素

3. 不要使用课程并删除CSS中我不喜欢的部分：

   @media print{
      .container { /* remove unwanted styling */ }
   }
   

Answer 1

那不会奏效。你可以做特定的技巧。

如果container有背景，您可以使背景透明。你可以撤消＆＃39;其他造型也是类似的。

如果container有其他内容，您可以将该内容包装在spans或div中并隐藏它们。如果它只包含文字，您可以制作font-size: 0，并将font-size content设置为特定尺寸（默认为1rem）。

但所有这些可能性只是解决了这样一个事实：你不能隐藏父母同时保持孩子可见，所以基本上我认为option 3是你最好的选择。