html - @media 打印显示 :none isn't working

Question

我已经尝试了 3 个多星期，使用不同的实现来尝试让右侧部分不显示，而左侧部分以全宽显示。鉴于我的研究表明没有简单或简化的方法可以在不查看打印预览的情况下快速呈现打印 View ，我正在寻求一些帮助来解决这个问题。

不起作用的打印媒体 css 是这样的:

#gc {
    width: 100%;
}
#asideTrack {
/*      width: 100%;*/
    display: none;
}
.asideTrack {
/*      width: 100%;*/
    display: none;
}
.slideAside {
/*      width: 100%;*/
    display: none;
}
#slideAside {
    display:none
}

有什么建议吗？

Answer 1

在 CSS 中，如果它们具有相同的优先级(取决于选择器)，lower 规则会覆盖 top

您不在@media block 中编写常用的 css，它低于您的@media 打印 block ，因此它会覆盖您的@media 打印样式。例如，这就是为什么在打印预览中您的左侧 block 的宽度为 74%(因为此规则低于您所说的 100% 的@media 打印 block 的规则)。

希望对您有所帮助。

解决方案

1. 在您的 css 文件中，您可以将媒体打印 block 放在文件末尾。
2. 将!important 指令添加到媒体打印 block 中的某些规则。 IE: p { 颜色:红色!重要；
3. 将您的屏幕专用 CSS 放在媒体屏幕 block 中。