Question

我的网站模板在打印时看起来相当不错，所以我没有单独的打印css。

然而，顶部有一个元素在打印时不需要，大约2英寸高，所以这在打印页面的顶部是浪费（这会使用户分散实际内容）< / p>

所以，我想要完成的是，当用户打印页面时，在页面顶部“隐藏”该元素（div）。

但到目前为止，我见过的唯一解决方案是top创建一个单独的css文档，然后在用户打印我的页面时使用。这听起来不错，但我现在必须维护2个不同的样式表，内容完全相同（除了那个div）吗？

或者是否可以在打印样式表中覆盖标准样式表？（所以我只需要在我的打印样式表中为那个div定义异常？）

希望这能解释我的问题......

Answer 1

如果您声明主样式表适用于所有媒体（browsers apply it to all by default）：

<link rel="stylesheet" type="text/css" media="all" href="style.css">

然后添加打印样式表不应要求您在两个CSS文件中复制样式：

<link rel="stylesheet" type="text/css" media="all" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

您要做的就是将特定于打印的样式添加到print.css。

但是，如果您想保留单个样式表，并在该样式表中包含特定于打印的覆盖，则可以将规则放在打印介质规则中：

@media print {
    div.do-not-print {
        display: none;
    }
}

Answer 2