如何在两种打印场景的@media查询间共享CSS规则？

可以通过选择器分组或CSS标准的:is()伪类实现需求，无需重复编写样式规则，完全依赖原生CSS，不需要JavaScript或预处理器：

方法1：使用:is()伪类（现代浏览器推荐） #

:is()能简化多父容器下的选择器逻辑，同时匹配两种结构里的目标元素：

/* 同时覆盖：直接打印场景 + 屏幕端打印预览弹窗场景 */
@media print, screen {
  :is(body, #printPreview) > h1 {
    text-align: left;
  }
  :is(body, #printPreview) > .someClass {
    color: grey;
  }
  /* 其他需要统一的样式规则同理 */
}

逻辑说明：

• @media print 匹配直接调用浏览器打印的场景（元素直接挂载在body下）
• @media screen 匹配点击打印按钮弹出的预览弹窗场景（元素被包裹在#printPreview内）
• :is(body, #printPreview) 同时选中两种场景的父容器，后续子选择器即可匹配到两种结构下的目标元素

方法2：选择器分组（兼容旧浏览器） #

如果需要兼容不支持:is()的旧浏览器，直接用逗号分隔多选择器即可：

@media print, screen {
  body > h1,
  #printPreview > h1 {
    text-align: left;
  }
  body > .someClass,
  #printPreview > .someClass {
    color: grey;
  }
  /* 其他规则同理 */
}

两种方案都能避免重复编写样式，完美适配你提到的两种打印场景。

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