media="print"样式未生效的主因是media属性拼写错误、未进入打印预览验证、或被更高优先级样式覆盖；需确保media="print"严格书写、通过打印预览调试、合理使用!important或@media内联规则。
如果 media="print" 的 CSS 样式没生效，通常不是写法错了，而是几个关键细节被忽略了。
确认 link 标签的 media 属性拼写和值正确
必须严格写成 media="print"，不能是 media="printer"、media="screen print"（除非你真想同时作用于屏幕和打印），也不能漏掉引号或大小写错误（虽然 HTML 不区分大小写，但建议统一小写）。
- ✅ 正确：
<link rel="stylesheet" href="print.css" media="print"> - ❌ 错误：
<link rel="stylesheet" href="print.css" media="Print">（不推荐大写） - ❌ 错误：
<link rel="stylesheet" href="print.css" media="print, screen">（这样会始终加载，失去按需控制意义）
检查样式是否被其他规则覆盖
打印样式表里的规则，仍受 CSS 优先级约束。即使加了 media="print"，若普通样式表里用了更高级的选择器或 !important，也可能压过打印样式。
- 用浏览器「打印预览」（Ctrl+P / Cmd+P）打开开发者工具，切换到「打印」媒体类型（Chrome DevTools → ⚙️ Settings → Preferences → Elements → Enable "Show all media types"），再看计算样式
- 打印样式中可适当加
!important强制生效（仅限必要时），例如：body { display: none !important; } - 推荐用独立打印样式表（
media="print"的 link），避免和 screen 样式混在一起导致冲突
确保页面内容实际触发了打印媒体查询
media="print" 只在打印或打印预览时激活，不会影响正常浏览。如果你只是在网页上“看”，样式自然不显示。
立即学习“前端免费学习笔记（深入）”；
- 必须进入浏览器打印预览界面（不是截图、不是另存为 PDF 按钮，而是真实调用打印流程）才能验证
- 部分前端框架（如 Vue/React）动态渲染的内容，若打印时 DOM 尚未就绪，可能导致样式失效；可在打印前用
window.print()前加短延时或监听beforeprint事件做准备 - 注意：某些 CMS 或编辑器（如 WordPress 可视化编辑器）会过滤
media属性，需检查输出源码是否被删改
替代方案：用 @media 规则内联写法更可控
如果外部 link 加载不稳定（比如异步加载、CDN 缓存问题），可直接在主样式表或 <style> 中写：
<style>
@media print {
body { font-size: 12pt; color: #000; }
.no-print { display: none; }
.print-only { display: block; }
}
</style>
- 这种方式无需额外请求，加载即生效，调试也更直观
- 适合小量打印定制；大量样式仍建议分离为独立文件 +
media="print" - 注意：内联 style 中的
@media print同样只在打印时起作用，日常浏览不可见
基本上就这些。核心就三点：写对 media 值、进打印预览看效果、别让其他样式抢了优先级。不复杂但容易忽略。
