css - 为什么打印时普通样式表优先于打印样式表？

Question

我试图通过构建良好的打印样式表来绕过对 PDF 组件的需求。

我有两个 CSS 文件，site.css和 print.css .它们通过以下方式加载:

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

site.css是一个又大又长又无聊的 css 文件，加上

.printonly
{
    display: none;
}

这适用于我为打印而添加的文档中的元素，我不想在页面上显示这些元素。它只存在于 site.css 文件中。

当我通过 <img class="printonly" src="image.png" id="logo" alt="logo"/> 加载图像时它在打印纸上是不可见的。

如果我放下 class="printonly" , 然后它将图片很好地放置在打印页面上。

这让我相信它正在接收 site.css即使在尝试打印时也是如此。

有什么办法解决这个问题，或者任何人都可以提出任何建议吗？

---

为了完成起见，我包含了整个 print.css，但是，我不确定是否真的需要它:

body {
    width: 210mm;
    height: 297mm; }

#logo {
    margin-left: 50%;
    margin-right: 50%; }

.noprint {
    display: none; }

Answer 1

您可以只为屏幕媒体制作第一个样式表，也可以将这些图像的显示值更改回打印媒体样式表中的内联。