使用CSS隐藏打印内容

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

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

因此，举例来说，如果我想只打印div.content，我会做这样的：

.header, .menu, .footer { 
    display: none; 
}

如果布局是复杂的，它变得凌乱。有没有更容易的方法来做到这一点与CSS？

来源

2011-01-27 Dziamid

您可以按照文章只打印您想要的div！ http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div – BillDo168 2014-10-28 02:58:05

我做到了CSS3的方法：不使用类伪直接祖先（儿童）

/* hide all children of body that are not #container */ 
body > *:not(#container) { 
    display: none; 
} 
/* hide all children of #container that are not #content */ 
#container > *:not(#content) { 
    display: none; 
} 
/* and so on, until you reach a div that you want to print */ 
#content > *:not(#print_me) { 
    display: none; 
}

这样就可以消除，除非你想打印，即使在非常复杂的布局什么的一切。：这里不是非常高效，因为它会考虑到您对html的任何未来修改。

来源

2011-02-17 00:04:27 Dziamid

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

现在您需要将类noPrint应用于要在打印中隐藏的元素。

这是专门使用样式表进行打印，并和设置它的媒体属性来print好的做法。

例子：

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

来源

2011-01-27 13:33:09 Sarfraz

确定在指定了所有其他样式部分后添加打印部分。这样，打印语句将在打印时覆盖其他样式。 – Mike 2011-01-27 13:40:27

问题说：`寻找一个简单的方法来隐藏除了某个div以外的所有东西` – Pooya 2016-01-18 10:47:28

指定打印网页时，它定义的行为单独的CSS文件。

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

，然后内的文件只是定义：

.header, .menu, .footer { display: none; }

来源

2011-01-27 13:33:54 Tr1stan

您可以使用类。

.classHide{display: none}

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

所以你不需要使用另一个CSS文件。

来源

2011-01-27 13:40:40 Thiago

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

body > div { 
    display: none; 
} 

#content { 
    display: block; 
}

来源

2011-01-27 14:03:05 RoToRa

使用CSS隐藏打印内容

回答

相关问题