在其他地方使用 print.css 和 @media print答案

【问题标题】：Using print.css with @media print elsewhere在其他地方使用 print.css 和 @media print
【发布时间】：2011-11-28 20:50:39
【问题描述】：

我有一个网页，它使用站点全局 print.css 样式表来呈现页面以供打印。该页面还为 div、标题等使用站点范围的类。

我需要在打印版中增加本页的正文宽度和字体大小。我无权编辑全局 print.css，并且不想在那里进行更改，因为更改会影响我不想更改的其他页面（由于使用全局样式、div 类、等等。）。

幸运的是，该页面确实有自己的样式表 foo.css，我可以对其进行编辑以进行仅影响该页面的更改。

更复杂的是，页面在 body 类上有一个内联样式，我只需要更改它以进行打印。

通常我会用我的样式更改来编辑 foo.css，使用 !important 根据需要覆盖内联样式，但我想不通的是：

我可以使用@media print { body {width: 900px; !important;}} 在 foo.css 中，即使我已经有一个 print.css 也能正常工作？

我一直在尝试在 Firebug（使用 Web 开发人员工具栏）中对此进行测试，但如果我将 @media 打印调用添加到 foo.css，似乎什么也没有发生。

想法？

【问题讨论】：

【解决方案1】：

这应该是可能的。检查事项：

【讨论】：

1) 我在 foo.css 上设置了 media="all" 但这似乎没有什么区别； 2) 额外的；在我的问题中是一个错字 - 实际样式表中不存在； 3) 特异性让我大吃一惊 - 内联样式似乎具有更高的特异性，因为它是内联 (1,0,0,0)，而 div.body 的特异性为 (0,0,1,1 )（根据计算器）。我认为 !important 会胜过这一点。我想情况并非如此。但是，如果内联样式总是具有最高的特异性，那么 !important 怎么会起作用呢？我想我在这里很困惑..
@Eclipse 不知道为什么存在第三个问题，因为内联样式总是比任何 CSS 样式具有最高的特异性，您无法改变这一事实。我建议（这是一个丑陋的修复）创建 2 个 div/span：当前的一个和一个隐藏的，可能有一个像“showOnPrint”这样的类，这样你就可以将该类添加到媒体打印中

【解决方案2】：

级联顺序有一些规则。见http://htmlhelp.com/reference/css/structure.html

【讨论】：