css - 打印媒体查询和样式表被忽略

Question

我的 CSS 中的 @media print {...} 有问题。我希望在打印页面时不显示左侧导航栏。打印时，我目前看到的是右边的粗图，而我想看到中间的粗图:

    screen                  print              current print
|             |        |             |        |             |
|| n |   m   ||        ||     m     ||        |    |   m   ||
|| a |   a   ||        ||     a     ||        |    |   a   ||
|| v |   i   ||        ||     i     ||        |    |   i   ||
||   |   n   ||        ||     n     ||        |    |   n   ||
|             |        |             |        |             |

但是由于这种布局方式，主要内容有一个空白，可以将其与 float 的左侧导航栏正确定位。这是因为我需要导航栏显示为整个页面高度。

我的浏览器似乎忽略了我的媒体查询，告诉它更改边距。我什至尝试过单独打印 css 表，我得到了相同的结果。

我不知道是否有可能在 jsfiddle 中测试这些东西，但无论如何这里有一个。它至少会显示基本的代码结构。 http://jsfiddle.net/mhguddf3/2/

这也是 codepen 中的一个版本，因为它可以将示例作为完整页面查看。 http://codepen.io/brandonkennedy/pen/Fkrcn

任何输入将不胜感激。

Answer 1

您的@media print block 需要放在样式表的末尾。其他规则，因为它们没有指定的媒体，适用于屏幕和打印，所以它们会覆盖您已经为打印声明的内容(在 CSS 中，相同特异性的规则按照它们给出的顺序应用；在发生冲突的情况下，最新提供的规则有效。

这是 jsfiddle .