加了 color-adjust: exact 没颜色是因为该规则必须置于 @media print 内且针对具体元素，否则打印引擎完全忽略；firefox 用 color-adjust，chrome/safari 依赖 -webkit-print-color-adjust，二者需共存。
为什么加了 color-adjust: exact 还是没颜色？
不是优先级问题，而是规则根本没被打印引擎识别。浏览器的打印渲染流程完全独立于屏幕渲染，@media print 是唯一有效的入口点——哪怕你在全局 CSS 里写了 color-adjust: exact，只要没包在 @media print 块内，它就等于不存在。
常见错误包括：把这条声明写在普通样式表顶部、只加在 body 上、或误以为加了 !important 就能穿透媒体限制。实际必须针对每个需要彩色输出的具体元素单独设置。
-
color-adjust: exact和-webkit-print-color-adjust: exact必须成对出现在@media print内部 - 作用目标要具体：比如
.invoice-header、.status-badge，不能只靠body { color-adjust: exact; } - Firefox 依赖
color-adjust，Chrome/Safari 仍主要认-webkit-print-color-adjust，缺一不可
如何让 background-color 在打印时真正生效？
浏览器默认禁用背景图形（包括 background-color 和 background-image），这是用户可调的省墨策略，无法用 CSS 强制绕过。但你可以提前适配：
- 必须配合
color-adjust: exact和-webkit-print-color-adjust: exact才可能启用背景色 - 避免使用
rgba()：打印机不处理 alpha 通道，rgba(0,0,0,0.9)可能降级为透明或灰度，一律改用#000或rgb(0,0,0) - CSS 变量如
color: var(--text-primary)需确保在@media print中已静态解析，否则 fallback 到初始值 - 更可靠的做法是用
border替代：.divider { border-top: 1px solid #ccc; }、.status.draft { border-left: 4px solid #6366f1; }
哪些颜色相关属性在 @media print 里必须重置？
别只盯着 color 和 background-color。打印引擎对继承和计算值极不敏感，很多“理所当然”的行为在打印时会失效：
- 统一重置文本色：
color: #000 !important，别信currentColor或父级继承 - 禁用背景：
background: transparent !important，否则深色模式页面可能整页变黑 - 链接需显式定义：
a { color: #000 !important; text-decoration: underline; }，否则可能消失或变灰 - 图片若保留，加
max-width: 100%; height: auto;；装饰性图片直接display: none - 字号至少
12px（或12pt），小于10px在 A4 纸上基本不可读
测试时最容易漏掉的三个关键点
开发完别急着交付，打开打印预览后重点检查这三项：
- 在 DevTools 的 “Styles” 面板中切换到打印预览模式，过滤
color，确认color-adjust是否真实出现在计算样式里 - 检查是否启用了 Tailwind 等工具链的
print变体——print:text-red-600类默认不生成 CSS，需在tailwind.config.js中显式启用 - 用户端的 “打印背景图形” 开关永远不可控，所以所有关键信息（状态、分隔、强调）必须用
border、outline或文字本身承载，不能依赖背景色
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
