CSS 为打印视图隐藏除一个 div 之外的所有元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1511745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide all elements except one div for print view
提问by mathiscode
I have the following CSS for my print style:
我的打印样式有以下 CSS：
* {
display:none;
}
#printableArea {
display:block;
}
I expected this to hide allelements, and only show the printableArea, however everythinggets hidden. In print view, all I get is a blank page.
我希望这会隐藏所有元素，并且只显示可打印区域，但是一切都被隐藏了。在打印视图中，我得到的只是一个空白页。
I have it included properly in the HEAD, with media="print"on this particular stylesheet.
我已将其正确包含在 HEAD 中，并包含media="print"在此特定样式表中。
采纳答案by Quentin
If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).
如果一个元素没有被显示，那么它的任何子元素都不会被显示（不管它们的 display 属性被设置为什么）。
*matches the <html>element, so the entire document is hidden.
*匹配<html>元素，因此整个文档被隐藏。
You need to be more selective about what you hide.
你需要对你隐藏的东西更有选择性。
回答by Charles Offenbacher
You're taking the right general approach, but you want to use visibility: hiddeninstead of display: noneso that you can set child elements to be visible.
您正在采用正确的通用方法，但您想使用visibility: hidden而不是display: none这样您可以将子元素设置为可见。
回答by PHLAK
html body * {
display:none;
}
#printableArea {
display:block;
}
Also, you may need an !important on #printableArea, but probably not.
此外，您可能需要在 #printableArea 上使用 !important，但可能不需要。
回答by Tarek Adam
You might try popping it up on top of everything. This solved 90% of my problems, then I just had to make a .noprintclass and add it to a few straggling elements.
您可以尝试将其弹出到所有内容之上。这解决了我 90% 的问题，然后我只需要创建一个.noprint类并将其添加到一些零散的元素中。
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
回答by Chad
If you want to use JavaScript, you can try this simple snippet that doesn't even require jQuery:
如果你想使用 JavaScript，你可以试试这个简单的片段，它甚至不需要 jQuery：
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
回答by Stevie Kay Speaks
make a div wrap everything after the body tag. Before the wrap div, put the visible item's div.
在 body 标签之后做一个 div 包裹所有的东西。在 wrap div 之前，放置可见项的 div。
I had to do this to make a simple username-password page, and needed to hide everything, except the half-opaque sign-in form's background. So, after the correct credentials were typed in, the form would animate out, and the half-opaque page cover would animate out, and finally, EVERYTHING aside would show up and you could use the page normally.
我必须这样做才能制作一个简单的用户名密码页面，并且需要隐藏所有内容，除了半透明的登录表单背景。因此，在输入正确的凭据后，表单将显示动画，半不透明的页面封面将显示动画，最后，除此之外的所有内容都会显示出来，您可以正常使用该页面。
回答by Salix
Answering because I found this question while searching for this
回答是因为我在搜索这个问题时发现了这个问题
Instead of 'display: none' you can use :
您可以使用 'display: none' 代替：
* {
visibility: hidden;
margin:0; padding:0;
}
#printableArea * {
visibility: visible;
}
来源：https: //www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa
回答by Harrison Smith
There is a one-line solution:
有一种单行解决方案：
With JQuery
使用 JQuery
var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));
Without JQuery
没有 JQuery
var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });
In both examples, set the selectorvariable to the selector you want. For example, div#page:hoveror p.class1,p.class2
在这两个示例中，将selector变量设置为您想要的选择器。例如，div#page:hover或p.class1,p.class2
