Question

我正在尝试显示打印预览div（示例中为#preview）。有没有办法只将print.css用于特定div及其子项覆盖所有本地定义？

基本上，我希望能够做类似的事情：

#preview element {
    definition equal to definition of an element in print.css
}

在main.css中

，但是有很多定义。它不太干，跟随选项更连贯。

第二种方法是将print.css包含在主文档中，并从

中更改每个定义

element {
    definition
}

为：

element, #preview element {
     definition
}

但在我看来这有点麻烦什么是解决这个问题的最佳方法？

更新只是举个例子：
在主文档中我有红色下划线链接，它们应该是蓝色未装饰的印刷版本。因此，当动态形成预览内容时，我会弹出div，其中所有链接都应该是蓝色未修饰的。但只有在特定的div（#preview）中，在文档的其余部分中，它们仍然是红色并加下划线。

Answer 1

也许将div设为iframe，其中包含由print.css设置的不同页面

或者，您可以将print.css标签上的媒体设置为“打印”，但在打印预览期间，您可以使用脚本将媒体更改为“全部”。

Answer 2

也许我还没有理解你的问题，但似乎你应该能够通过简单地在主样式表之后链接print.css样式表，并在print.css中为所有选择器添加前缀“#preview”来实现这一点。

在链接示例中，您需要指定如下样式：

#preview a, #preview a:link 
{
    text-decoration:none;
    color:blue;
}

除非您动态创建print.css文件，否则这应该非常简单。

Answer 3

<link rel="stylesheet" href="/main.css" type="text/css">
<link rel="stylesheet" href="/print.css" type="text/css">
</head>
<body>
<div id="main">
content
</div>

main.css:
selector1 {style}
selector2 {style}
and so on

print.css:
#print selector1 {style}
#print selector2 {style}
and so on

然后，当您生成打印预览时，只需将主包装的ID（通过JavaScript或其他）从“main”更改为“print”。

Answer 4

我记得，更具体的CSS声明将始终覆盖不太具体的声明，除非较不具体的声明被标记为重要声明。

因此...... #preview element { }将始终覆盖element { }

Answer 5

将其添加到样式表中：

@media print {
  #preview a:link {
    color:blue;
  }
}

是否可以使用另一个样式表设置div（及其子项）？

5 个答案: