使用CSS隐藏打印内容_Css_Printing

使用CSS隐藏打印内容

css printing

使用CSS隐藏打印内容,css,printing,Css,Printing,我正在寻找一种简单的方法来隐藏除某个div及其内容之外的所有内容 <html> <head></head> <body> <div class="header">...</div> <div class="menu">...</div> <div class="content">...</div> <div class="foote

我正在寻找一种简单的方法来隐藏除某个div及其内容之外的所有内容

<html>
  <head></head>
  <body>
    <div class="header">...</div>
    <div class="menu">...</div>
    <div class="content">...</div>
    <div class="footer">...</div>
  </body>.
</html>

如果布局复杂，就会变得杂乱无章。有没有一种更简单的方法可以使用CSS实现这一点

@media print {
.noPrint {
    display:none;
  }
}

现在，您需要将类

noPrint

应用于要在打印中隐藏的元素

最好使用专门用于打印的样式表，并将其媒体属性设置为

print

示例：

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

指定一个单独的CSS文件，用于定义打印网页时的行为

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

您可以使用类

.classHide{display: none}

根据您使用的语言，当if==true时，可以向页眉、菜单和页脚添加类

因此，您不需要使用其他css文件。

根据您的HTML结构（以及您需要支持的浏览器，因为IE6不支持这一点），您可以隐藏所有顶级div，只显示要显示的一个或几个div：

body > div {
   display: none;
}

#content {
  display: block;
}

我采用css3的方式：不使用伪类和直系祖先（子类）

/*隐藏身体的所有非#容器的子项*/
正文>*：非（#容器）{
显示：无；
}
/*隐藏#容器中所有非#内容的子项*/
#容器>*：非（#内容）{
显示：无；
}
/*依此类推，直到到达要打印的div*/
#内容>*：不（打印）{
显示：无；
}

这样，即使在非常复杂的布局中，也可以消除除要打印的内容之外的所有内容：not在这里效率很高，因为它会考虑将来对html的任何修改。

请确保在指定所有其他样式部分后添加打印部分。这样，打印语句将在打印时覆盖其他样式。问题是：

寻找一种简单的方法来隐藏除某个div之外的所有内容

，这应该是公认的答案。这是所有其他答案中最灵活的一个，不涉及使用JS或使用某些JS插件手动显示隐藏元素。您将如何告诉它们仅在使用CSS以外的任何东西打印时隐藏？我的观点是，您不能使用服务器端语言来告诉样式仅在打印时应用。这是因为打印是在客户端进行的，所以服务器什么都不知道。您可以按照本文只打印您想要的div！

.classHide{display: none}

body > div {
   display: none;
}

#content {
  display: block;
}