CSS 隐藏除一个div以外的所有元素以进行打印视图

在本文中，我们将介绍如何使用CSS隐藏除一个div以外的所有元素，以便在打印视图中只显示特定的div内容。

阅读更多：CSS 教程

使用CSS的display属性隐藏元素

使用CSS的display属性可以控制元素的显示和隐藏。要隐藏一个元素，可以将其display属性设置为none。在打印视图中，我们可以通过将其他元素的display属性设置为none，只显示特定的div元素。

下面是一个示例，指定了一个id为printed-content的div元素，其他元素都将被隐藏：

<style>
@media print {
  body *:not(#printed-content) {
    display: none;
  }
}
</style>

<div id="printed-content">
  <!-- 这是要在打印视图中显示的内容 -->
</div>
<div>
  <!-- 这是要隐藏的内容 -->
</div>

在上面的示例中，我们使用@media print媒体查询来应用这些样式。这将确保这些样式仅在打印模式下生效。

在样式定义中，我们使用了*:not(#printed-content)选择器。这意味着除了id为printed-content的div元素以外，其他所有元素都将被隐藏。

有时候，可能还需要隐藏一些特定的子元素。可以使用该元素的子元素选择器进行控制，例如：

<style>
@media print {
  body *:not(#printed-content) {
    display: none;
  }

  #printed-content * {
    display: block;
  }
}
</style>

<div id="printed-content">
  <!-- 这是要在打印视图中显示的内容 -->
  <div>
    <!-- 这是要隐藏的div内的内容 -->
  </div>
</div>

在上面的示例中，我们将id为printed-content内的子元素的display属性设置为block，以确保这些子元素在打印视图中可见。

使用CSS的visibility属性隐藏元素

除了使用display属性来隐藏元素外，还可以使用visibility属性。与display属性不同，将元素的visibility属性设置为hidden时，元素仍然占据空间，但不可见。

下面是一个示例：

<style>
@media print {
  body * {
    visibility: hidden;
  }

  #printed-content {
    visibility: visible;
  }
}
</style>

<div id="printed-content">
  <!-- 这是要在打印视图中显示的内容 -->
</div>
<div>
  <!-- 这是要隐藏的内容 -->
</div>

在上面的示例中，我们将所有元素的visibility属性设置为hidden，然后将id为printed-content的div元素的visibility属性设置为visible，以确保在打印视图中只显示该div元素。

使用CSS的z-index属性隐藏元素

还可以使用CSS的z-index属性来控制元素的堆叠顺序。通过将要隐藏的元素的z-index属性设置为较低的值，可以将其放置在其他元素下方，从而达到隐藏的效果。

下面是一个示例：

<style>
@media print {
  body * {
    z-index: -1;
  }

  #printed-content {
    z-index: auto;
  }
}
</style>

<div id="printed-content">
  <!-- 这是要在打印视图中显示的内容 -->
</div>
<div>
  <!-- 这是要隐藏的内容 -->
</div>

在上面的示例中，我们将所有元素的z-index属性设置为-1，然后将id为printed-content的div元素的z-index属性设置为auto，以确保在打印视图中只显示该div元素。