防止引导'隐藏打印'继承（a.k.a.覆盖隐藏打印）

Question

我有一个大的HTML页面，其中value类声明在顶部附近，但它有一个需要打印的窗口（绝对定位）。

问题：是否可以从hidden-print父级强制打印树下的元素？

将隐藏打印应用于单个元素不是一种选择，因为HTML是动态生成的，我无法控制父样式。

我的HTML（为简洁起见而简化）：

hidden-print

CSS：

<div>
   <div class="hidden-print">
     <div>This should not be visible while printing</div>
     <div>This should not be visible either</div>
     <div class="do-print">This SHOULD be visible</div>
   </div>
</div>

jsFiddle

Answer 1

由于Bootstrap使用 display:none 来隐藏元素，因此 不可能。您不能在未显示的元素内显示子元素。

但，如果您创建自己的自定义功能来处理此问题，那么您可以尝试实现的效果。您可以使用 visibility: hidden 和 visibility: visible ，因为元素可以在不可见的父级内部显示。

差异在于 display:none 的工作方式;它实际上从DOM中移除元素：

  

[...]值none允许您关闭元素的显示;当您使用none时，所有后代元素的显示都会关闭。文档的呈现方式就好像元素不存在于文档树中一样。

如果删除了父元素，则也会删除子元素。相反， visibility: hidden 只需隐藏元素;它仍然可以在DOM中看到：

  

可见性CSS属性可以显示或隐藏元素而不影响文档的布局（即，为元素创建空间，无论它们是否可见）。

因此，您可以为子元素添加样式以显示它：

＆＃13;

＆＃13;

@media print {
  .no-print {
    visibility: hidden !important;
  }
  .do-print {
    visibility: visible !important;
  }
}

＆＃13;

<div>
  <div class="no-print">
    <div>This should not be visible while printing</div>
    <div>This should not be visible either</div>
    <div class="do-print">This SHOULD be visible</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我还创建了一个演示 here 的小提琴。

请注意，使用 visibility: hidden 会将元素置于的位置，并包含隐藏内容。如果您想重新定位元素以适应现在不可见的元素，则需要调整 print 媒体查询中的定位。

希望这有帮助！ ：）