Question

我一直在寻找我的问题的答案，但根本找不到其他问题，所以我决定转向堆栈溢出。

我正在为@media打印添加CSS规则，偶然发现了一个我无法理解的问题。我正在尝试使用*选择器将background-color：white应用于所有元素，但某些元素会忽略该规则并继续使用先前定义的颜色，从而覆盖打印媒体规则。

这是可以重现问题的最简单的CSS文件：

footer {
    background-color: lightblue;
}

@media print {
    * {
        background-color: white;
    }
}

在我的HTML中，我有简单的页脚标签，没有任何类或ID。

...
<footer>
    Footer content here
</footer>
...

我已经检查了HTML和CSS的有效性，所以它不应该是语法错误

如果我使用Chrome开发者工具选项模拟CSS媒体：打印或打印预览并选中背景颜色和图像，会发生什么情况，页脚元素保持浅蓝色颜色。

如果我使用Developer工具检查元素，则表明已覆盖@media打印规则：

~~background-color：white;~~

我无法理解为什么上面的页脚规则会覆盖*规则。据我所知，这两条规则具有相同的特异性，因此最后一条规则应该是应用的规则。但事实并非如此。如果我在媒体查询下编辑规则以明确说明该规则也应该应用于页脚元素，它就可以工作：

*, footer {
    background-color: white;
}

但对我来说，这似乎很奇怪，因为我认为*已经包含了页脚元素。我当然可以将CSS与规则中指定的页脚一起使用，但我仍然真的想知道为什么单独使用星号是不够的。

Answer 1

问题在于你的范围

/* global scope */
footer {
    background-color: lightblue;
}
/* media-print scope */
@media print {
    * {
        background-color: white;
    }
}

由于您在全局范围内为background-color定义了footer而footer > *（因为它更具体而具有更高的优先级），因此它会覆盖您的全局背景颜色。

请尝试以下方法进行修复（未对其进行测试）：

＆＃13;

@media screen {
  footer {
    background-color: lightblue;
  }
}

@media print {
  * {
    background-color: white;
  }
}

＆＃13;

Answer 2

虽然您的代码是正确的，但为了安全起见，我宁愿做background-color: transparent（我认为打印机实际上并不打印白色......）。

footer {
  background-color: lightblue;
}

@media print {
  * {
    background-color: transparent; 
    /* Try emulating using this: 'background-color: transparent !important;', seems chrome emulator isn't respecting this without the !important rule. */
  }
}

我测试了您的代码，这似乎是开发工具模拟器的一个问题。当我模拟打印时，页脚仍然具有背景颜色。但是当我在网页浏览器中按下“打印”时，背景是白色的，就像你期望的那样。

Answer 3

查看HTML5Boilerplate的打印CSS： https://github.com/h5bp/html5boilerplate.com/blob/master/src/css/_print.css

Answer 4

当您使用媒体查询时，它就像一个if语句，如果列出的条件适用，它将包含该块中的样式。然而，仅仅因为他们在媒体查询中，他们没有被赋予更高的特异性。 *选择器的特异性始终低于页脚，无论它在何处写入。

这个CSS Tricks可能是CSS特异性最全面的细分。如果您查看＆＃34;重要说明＆＃34;你会看到*的特异性是0,0,0,0，页脚是0,0,0,1。您还可以查看讨论媒体查询特殊性问题的crimsondesigns.com/blog/…（问题＃4）。

打印媒体通用（*）规则在页脚元素上被覆盖

4 个答案: