print样式表未生效主因是路径错误、被全局样式覆盖、!important滥用或file://协议限制；应独立引入media="print"样式表，避免嵌套@media，用pt单位并调试打印预览中的样式应用。
直接用 <link rel="stylesheet" media="print"> 就能单独加载打印样式表，但实际中常因路径、优先级或媒体查询覆盖问题导致样式不生效。
为什么 print 样式表没生效？
常见原因是浏览器在屏幕渲染时完全忽略 media="print" 的样式表，但它仍会下载（除非加 disabled 或 JS 动态控制），所以“没生效”往往不是没加载，而是：
- 打印预览里被其他未加 media 限制的样式覆盖了（比如全局 body { margin: 0 } 没写 @media print）
- 样式表路径 404，控制台报 Failed to load resource，但你没注意到
- 使用了 !important 的屏幕样式强行压过了 print 样式（print 媒体查询本身权重不更高）
- 本地文件协议（file://）下部分浏览器禁止加载外部 print 样式表（尤其 Chrome）
如何确保 print 样式只在打印时起作用？
最稳妥的做法是：把所有打印专用规则收进一个独立文件，并用 media="print" 引入；同时，在主样式表里对需隐藏/重排的元素显式声明 @media print 规则，避免依赖单一外部文件。
- 推荐结构：
<link rel="stylesheet" href="screen.css"> <link rel="stylesheet" href="print.css" media="print">
-
print.css里不要写@media print { ... }—— 整个文件就是为 print 生效的，嵌套反而多余 - 若需微调某几个组件（如隐藏页眉、放大字体），直接在
print.css里写：.header, .nav { display: none !important; } body { font-size: 14pt; line-height: 1.6; } - 注意单位：打印场景建议用
pt或in（如1in），避免px在不同 DPI 下缩放异常
调试 print 样式表的实用技巧
Chrome 和 Firefox 的打印预览（Ctrl+P / Cmd+P）支持实时调试，但默认不显示 media="print" 的样式面板，需手动开启：
- 打开开发者工具 → ⚙️ Settings → Preferences → Elements → 勾选
Show styles for print media - 在 Elements 面板选中元素，右侧 Styles 标签页就能看到哪些 print 规则被应用、被覆盖
- 临时禁用 screen 样式快速验证：在 Elements → Styles 中，点击对应
screen.css行首的复选框，取消勾选 - 用 JS 快速切换测试：
document.querySelector('link[media="print"]').disabled = true;再刷新打印预览，看变化
真正容易被忽略的是：print 样式表里的相对路径（比如 background: url(../img/logo-print.png)）必须能在打印上下文里解析——如果页面通过 iframe 加载或跨域，这些资源大概率被拦截或 404。别假设它和屏幕样式一样“自然可用”。
立即学习“前端免费学习笔记（深入）”；
