css - 如何在打印中显示部分但在屏幕上隐藏呢？

我想在屏幕上隐藏图像/徽标，但希望在打印时显示。我的努力一直没有奏效。我的代码有什么问题？

<style>
@media print {
   #othersections, #ebooknav {display: none;}
   #test {width: 100%; margin-top: 150px;}
   #printlogo {display: block; margin-top: 0px;}
             }
</style>
<script>
function myFunction() {
    window.print();
}
</script>
<div id="printlogo" style="display: none;"><img src="/images/logo.png" /></div>
<div id="test" style="margin-right:220px; float:left;">
Content to be printed
</div>
<div id="ebooknav">
<a href="" title="Print Page" onclick="myFunction()"><img src="/printbutton.png" /></a>
</div>

最佳答案

感谢BoltClock提供的线索。我意识到这是由于样式优先级方面的冲突。样式可以根据以下内容相互覆盖（来源：w3schools: cascading order of multiple styles）：


内联样式（在HTML元素内）-最高优先级
内部样式表（在头部）
外部样式表
浏览器默认值-最低优先级


在上述问题中，我删除了内联样式并将其放入内部样式表中，或者稍后也可以将其放入外部样式表中：

<style>
@media screen {
   #printlogo {display: none;}
              }
@media print {
   #othersections, #ebooknav {display: none;}
   #test {width: 100%; margin-top: 150px;}
   #printlogo {display: block; margin-top: 0px;}
             }
</style>
<script>
function myFunction() {
    window.print();
}
</script>
<div id="printlogo"><img src="/images/logo.png" /></div>
<div id="test" style="margin-right:220px; float:left;">
Content to be printed
</div>
<div id="ebooknav">
<a href="" title="Print Page" onclick="myFunction()"><img src="/printbutton.png" /></a>
</div>

终于成功了！

关于css - 如何在打印中显示部分但在屏幕上隐藏呢？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24924674/