全部隐藏，用css显示一个类答案

【问题标题】：Hide all, show a class with css全部隐藏，用css显示一个类
【发布时间】：2014-10-13 17:42:36
【问题描述】：

上下文：制作可打印的发票以在浏览器中生成。

在制作可打印网页时，通常使用@media print 规则来更改内容查找打印页面的方式。理想情况下，因为我只打印页面的一小部分，所以我想隐藏所有内容，然后显示特定元素的内容。

结构是这样的：

<body>
    <div id="topMenu">...lots of elements...</div>
    <div id="sideMenu">...lots more...</div>
    <div class="tools">...some tools...</div>
    <div class="printing">...some elements I want to print...</div>
    <div class="tools">...more stuff I don't want to print...</div>
</body>

我试过的东西：

理想情况下，我想做类似的事情

body * {
    display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
    display: block !important;
}

但这行不通，因为有些元素需要内联，有些需要阻塞。我玩过display 和MDN 的一些不同值，但找不到可以轻松将值重置为原始值的值。 display: initial 似乎被视为 inline。

CSS: "display: auto;"? 中的建议似乎只适用于 JS。

当然，可以明确地“隐藏”我不想打印的东西，而不是显示我想要的东西，但在我看来，应该可以采用另一种方式。

在这个问题中 How to only show certain parts with CSS for Print? 建议 body *:not(.printable *) {display:none;} 但指出（作为备份 on the w3 negation page ）尚不支持。

我注意到w3 draft 和the display-outside page 似乎建议使用未知（对 webkit）box-suppress 属性来保留显示值而不显示元素。

我的问题：

当某些元素不共享一个共同的显示属性时，隐藏所有内容并以特定元素为目标进行显示的最佳方法是什么？

box-suppress 到底是做什么的？

【问题讨论】：

你试试less
为了回答您的辅助问题，box-suppress 是display:none 未来可能的替代品，它有望使隐藏元素更容易，而无需担心更改其显示类型。我认为它目前不受支持，所以我暂时远离它。更多：w3.org/TR/css-display
谢谢@Ben Leggiero。根据阅读box-suppress 上的文档，在我看来，这将使将来可以“切换”显示而不是重置它，这是我最初的方法，而不是构建特定的选择器。这会是box-suppress 的（一个/那个）用例吗？
@Josiah 看来情况正是如此！
@BenLeggiero - 恕我直言，您应该编辑您的答案以包含它，以便寻找未来盒子抑制信息的人可以找到如何使用它。感谢您的帮助！

标签： html css printing

【解决方案1】：

由于您专门标记了此 CSS3，请尝试使用 CSS3！

body>:not(.printing) {
    display: none;
}

这应该适用于您提供的示例。我希望它适用于您的实际应用程序！

为了回答您的辅助问题，截至 2014 年 10 月，box-suppress 是display:none 未来可能的替代品，希望能够更轻松地从流中隐藏和删除元素，而无需担心更改其显示类型（如与visibility 相对，它仍然保持在流中，而position:absolute 仍然保持可见）。我认为它目前不受支持，所以我暂时远离它。想了解更多，请看http://w3.org/TR/css-display

【讨论】：

非常好——我没想过使用 > 选择器。这非常有效！
@Josiah 很高兴我能帮上忙！ :3

【解决方案2】：

您不能为此目的使用display。见Display HTML child element when parent element is display:none

但是，您可以使用visibility，只要您对隐藏内容使用绝对定位：

body, body * {
  visibility: hidden;
  position: absolute;
}

.printing, .printing * {
  visibility: visible;
  position: relative;
}

【讨论】：

【解决方案3】：

如果您不使用任何绝对或固定元素，您可以使用另一种隐藏元素的方式。

不要使用display: none 来隐藏您的元素，而是尝试使用：

body * {
    position:absolute;
    top: -999999px;
    left: -999999px;
}

要设置它回来使用：

.printing, .printing * {
     position: initial;
     /* OR */
     position: static;
}

【讨论】：

这可行。我有一些绝对定位的元素，但我可能会对其进行修改。