color-adjust 属性必须嵌套在 @media print 中并配合显式颜色声明和用户设置才生效，单独使用会被忽略；需同时声明 -webkit-print-color-adjust、color-adjust 和 print-color-adjust 三前缀，并加 !important，且目标元素须显式定义 background-color 或 color。
color-adjust 属性本身不能单独“强制”保留打印颜色，它必须和 @media print、显式颜色声明、用户设置三者配合才生效。只写 color-adjust: exact 而不满足其他条件，浏览器直接忽略——不是 bug，是规范要求。
必须写在 @media print 块内，否则完全无效
这是最常踩的坑：把 color-adjust: exact 放在普通样式表、@media screen 或全局 body 里，开发者工具里会看到该规则被划掉（strikethrough），说明未被打印媒体识别。浏览器只在 @media print 上下文中解析这个属性。
-
@media print是硬性容器，所有打印相关颜色控制都得嵌套在里面 - 不能用
* { color-adjust: exact; }兜底——Firefox 对通配符支持不稳定，且可能拖慢解析 - 推荐精确作用到关键元素，比如
.invoice-header、.report-table
color-adjust: exact 必须和另外两个前缀并写
单写 color-adjust: exact 会漏掉旧版 Chrome、Safari 或 Firefox 107 之前的用户。目前最稳妥的写法是三者并存：
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
@media print {
.highlight-box {
background-color: #eef2ff;
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
-
-webkit-print-color-adjust：Chrome、Edge（Chromium）、Safari 必须有 -
color-adjust：W3C 标准名，新版 Chrome/Firefox 支持良好 -
print-color-adjust：Firefox 107+ 和部分旧版 Chrome 的 fallback -
!important不是为了覆盖业务样式，而是防 vue-print-nb 等插件注入的 reset 规则
目标元素必须显式声明 background-color 或 color
继承来的颜色、transparent、rgba(0,0,0,0) 都不算“显式声明”，exact 不会触发渲染。
-
background-color: #fff可以，background-color: transparent不行 - 渐变（
linear-gradient）、半透明色（rgba(0,0,0,0.1)）、background-image基本无法可靠打印，别依赖 - 文字颜色同理：必须写
color: #333 !important，不能只靠父级继承 - 用户若在 Chrome/Firefox 打印对话框中勾选了「仅打印文本」，所有背景和颜色 CSS 全部失效，代码无法绕过
Firefox 用户需额外注意 userContent.css 注入
有些网站（如 Notion 嵌入页、知乎打印页）在自己的 @media print 里主动写了 print-color-adjust: economy，这会压倒你页面里的 exact 声明。此时只能靠 Firefox 的用户样式表干预：
- 地址栏输入
about:support→ 点「配置文件夹」→ 打开chrome/子目录 - 新建或编辑
userContent.css，加入全局强制规则：
@media print {
* {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
重启 Firefox 生效。这个方法绕过了网页自身样式干扰，但仅限 Firefox 本地用户可控场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
