color在打印样式中不生效，主要是浏览器默认启用黑白/灰度打印模式，需在打印设置中手动关闭“黑白打印”并开启“背景图形”；CSS仅定义意图，实际效果取决于打印对话框配置。
打印样式里 color 不生效？先确认浏览器是否启用彩色打印
绝大多数情况下，@media print 中设置的 color 在实际打印时被忽略，不是 CSS 写错了，而是浏览器或打印机默认启用了「灰度打印」或「节约墨水」模式。Chrome、Edge 默认勾选「仅打印黑白」，Firefox 也倾向禁用颜色输出——这属于系统级限制，CSS 无法绕过。
- 必须在浏览器打印预览界面手动取消勾选
“黑白打印”或“Grayscale” - 部分企业环境策略可能强制灰度，此时前端无解
- 即使 CSS 写了
color: #ff6b6b;，若打印设置为灰度，最终输出仍是中性灰
print 媒体查询中 color 能起作用的典型场景
只有当设备明确支持并启用彩色输出时，color 才会参与渲染。常见有效场景包括：PDF 导出（如 Chrome “另存为 PDF”）、部分支持 CSS 颜色的专用打印服务、或用户主动开启彩色打印的家用喷墨打印机。
-
@media print { body { color: #2c3e50; } }在 PDF 导出中通常能保留 - 链接文字用
a:link { color: #3498db; text-decoration: underline; }可提升可读性（但需搭配text-decoration，否则纯色链接在灰度下不可见） - 避免依赖
color传递关键信息，比如用红色表示错误——应同步加图标或文字标识
更可靠的打印配色替代方案：background-color + print-specific classes
比起依赖 color，用 background-color 搭配高对比边框或文字加粗，对打印识别更友好。但注意：多数浏览器默认禁用背景图形打印，必须显式开启。
- 在打印设置中勾选
“背景图形”（Chrome/Edge 中叫“Background graphics”） - 配合类名控制，避免全局污染：
@media print { .print-color-warning { background-color: #fdf2f2; color: #c0392b; border-left: 4px solid #e74c3c; padding: 8px 12px; } } - 纯色块比渐变/透明更稳妥，
rgba()和hsla()在打印中常退化为黑/白/灰
检查 color 是否真的被应用：用 DevTools 强制触发 print 媒体
开发阶段不能只靠肉眼判断，要验证 CSS 是否进入生效流程。Chrome 和 Edge 支持在 DevTools 的 Rendering 面板中强制启用 @media print 模式。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools →
⋯→More Tools→Rendering - 勾选
Emulate CSS media type，下拉选择print - 此时页面立即按打印样式重绘，可直接 inspect 元素看
color计算值是否符合预期 - 注意：该模式不模拟打印机驱动行为（如灰度转换），仅验证 CSS 层是否命中
color 都是静默失效。 
