为何@media print中设置.container为黑色后标题仍未变色？

这事儿核心原因是CSS继承的优先级是最低的，而且标题元素（h1-h6）本身大概率带有明确的颜色样式——要么是浏览器默认样式表（User Agent Stylesheet）里自带的，要么是你自己写的CSS里给这些标题单独设置了color属性。

具体来说：

• 浏览器默认会给h1-h6设置默认颜色（通常和body文本颜色一致，但如果你的自定义样式里修改过标题颜色，那就是你设置的那个值），这些直接作用在标题元素本身上的样式，优先级远高于从父元素.container继承来的颜色。
• 继承来的样式权重为0，哪怕是浏览器默认的直接样式，权重都比它高，所以.container设置的color根本覆盖不了标题上的直接颜色设置。

你可以这么处理：

• 直接在@media print规则里给标题单独设置颜色：

  @media print {
    body, .container { color: black; }
    h1, h2, h3, h4, h5, h6 { color: black; }
  }
  

• 或者用CSS的:is()选择器简化写法：

  @media print {
    body, .container, .container :is(h1,h2,h3,h4,h5,h6) { color: black; }
  }
  

内容的提问来源于stack exchange，提问作者slyprogrammer