为什么浏览器会忽略打印机mediaquery的css特异性规则?

时间:2015-07-29 08:25:02

标签: html css printing media-queries

我试图在打印机输出上显示一个特定的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 {},这个工作非常好。

建议有人吗?

2 个答案:

答案 0 :(得分:0)

这与特异性无关。它只是display的工作原理。

如果未显示元素,则也不显示其子元素。

来自the spec

  

:元素及其后代不会生成任何框。

你可以通过使用屏幕的演示看到:

&#13;
&#13;
     .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;
&#13;
&#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>