隐藏容器，但显示内容

Question

我正在尝试快速创建一个打印样式 sheet，我想在其中删除一个元素以使其不被打印，但仍然强制使用一个子元素。

<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 中嵌入两倍的内容。 class print-show 的嵌套元素显示在它们将被呈现的位置，并将它们隐藏在屏幕视图中。

2. 使用JS，在新的window/iframe中打开内容，剥离出我们要打印的元素

3. 不要使用 classes 并在 CSS 中去掉我不喜欢的部分：

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

Answer 1

那不行。你可以做一些特殊的技巧。

如果container有背景，可以把背景转parent。您可以 'undo' 以类似的方式设置其他样式。

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

但是所有这些可能性都只是 work-arounds 因为你不能在保持 child 可见的同时隐藏 parent，所以基本上我认为 option 3是你最好的选择。