打印媒体通用 (*) 规则在页脚元素上被覆盖答案

【问题标题】：Print media universal (*) rule gets overridden on footer element打印媒体通用 (*) 规则在页脚元素上被覆盖
【发布时间】：2018-04-13 12:59:50
【问题描述】：

我一直在四处寻找我的问题的答案，但根本找不到其他人解决我的问题，所以我决定求助于堆栈溢出。

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

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

footer {
    background-color: lightblue;
}

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

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

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

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

如果我使用 Chrome 开发工具选项 Emulate CSS Media: print 或选中 Background colours and images 的打印预览，页脚元素会保留其浅蓝色颜色。

如果我使用开发者工具检查元素，它显示@media 打印规则已被覆盖：

~~背景色：白色；~~

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

*, footer {
    background-color: white;
}

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

【问题讨论】：

标签： html css media-queries css-specificity

【解决方案1】：

问题出在你的范围内

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

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

尝试以下方法修复它（没有测试过）：

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

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

【讨论】：

感谢您的回答！我尝试了您的代码，虽然它确实修复了开发人员工具打印 css 仿真的颜色，但使用 Background colors and images 或 Background graphics 打开实际打印预览显示，该规则实际上仍然被覆盖。此外，从我读过的有关媒体查询的内容来看，我以前从未听说过范围会有不同的优先级。据我所知，媒体查询更像是 if 语句——其中的代码要么被读取，要么取决于媒体。
当您使用媒体查询时，它就像一个 if 语句，如果列出的条件适用，它将包含该块中的样式。然而，它们并没有因为它们在媒体查询中而被赋予更高的特异性。 * 选择器的特异性总是低于页脚，无论它写在哪里。
@dukedevil294 那么这与 * 选择器的特殊性有关吗？我尝试查找有关此的信息，但不知何故得到了使用选择器对特异性没有影响的印象，因此页脚和 * 将具有相同的特异性，在这种情况下，应该应用文件中稍后声明的那个。但我错了吗？您能否向我指出有关 * 选择器的特异性信息的可靠来源？
css-tricks.com/specifics-on-css-specificity，这可能是对 CSS 特性最全面的细分。如果您在“重要说明”下查看，您会看到 * 的特异性是 0,0,0,0，而页脚是 0,0,0,1。您还可以查看 crimsondesigns.com/blog/…（问题 #4），它讨论了媒体查询的特异性问题。
@dukedevil294 好的，现在我明白了。我在某处读到“通用选择器对特异性没有影响”，并认为这意味着使用 * 进行选择与直接选择元素具有相同的特异性。您能否发布有关特异性的信息作为问题的答案，以便我将其标记为解决方案？

【解决方案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. */
  }
}

我测试了您的代码，这似乎是开发工具模拟器的问题。当我模拟打印时，页脚仍然具有背景色。但是当我在网络浏览器中实际按下“打印”时，背景是白色的。

【讨论】：

感谢您的回答！然而，这个问题实际上也存在于印刷中。你只是没有马上看到它。这是因为默认情况下，大多数浏览器在打印时会忽略所有背景颜色和图像。如果您使用的是 Chrome，则在 Options 下有一个标记为 Background colours and images 或 Background graphics 的复选框。如果您检查，那么颜色是可见的，这意味着我的规则没有被应用。但是，是的，我应该使用的颜色是正确的，我将其更改为透明，谢谢您的提示！

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：