我试图在打印机输出上显示一个特定的div,同时阻止所有其他网站元素(也包括我的div)。 通常我会使用:
<div class="container">
Please don't show other containing elements
<div id="element">
Please show on printer
</div>
</div>
因此,由于容器div由类设置样式,因此它的特异性低于元素div的特性。因此,这应该有效:
@media print {
.container { display: none; }
#element { display: block; }
}
我还尝试在#element选择器上使用!important ,但Firefox和Chrome的打印机预览却忽略了我。 这绝对让我感到困惑,因为对于@media screen {},这个工作非常好。
建议有人吗?
答案 0 :(得分:0)
这与特异性无关。它只是display
的工作原理。
如果未显示元素,则也不显示其子元素。
来自the spec:
无:元素及其后代不会生成任何框。
你可以通过使用屏幕的演示看到:
.container {
display: none;
}
#element {
display: block;
}
&#13;
<p>Start</p>
<div class="container">
Please don't show other containing elements
<div id="element">
Please show on printer
</div>
</div>
<p>Fin</p>
&#13;
答案 1 :(得分:0)
不可能。 display: none
隐藏了父母中的所有孩子。您可以使用visibility:hidden
之类的内容:
@media print {
.container { visibility: hidden; }
#element { visibility: visible; }
}
演示:
.container {
visibility: hidden;
}
#element {
visibility: visible;
}
<div class="container">
Please don't show other containing elements
<div id="element">
Please show on printer
</div>
</div>