Question

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

在制作可打印网页时，通常会使用@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;
}

但这不起作用，因为有些元素需要内联，有些需要阻塞。我使用了来自MDN的display的一些不同值，但找不到一个可以轻松将值重置为原始值的值。 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究竟做了什么？

Answer 1

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

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

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

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

Answer 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;
}

Answer 3

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

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

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

要将其设置回使用：

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

隐藏所有，用css显示一个类

我试过的东西：

我的问题：

3 个答案: