media="print"是唯一可靠且浏览器原生支持的打印样式加载机制；它必须严格小写、加英文双引号，仅在打印预览或window.print()时加载解析，写错即失效，普通浏览时完全不参与渲染。
media="print" 是唯一可靠、浏览器原生支持的机制，其他方式（比如 @import、混在主 CSS 里的 @media print 块）要么加载时机不可控，要么调试困难、容易污染屏幕样式。
link 标签的 media="print" 必须写对
这不是“提示”，而是浏览器决定是否加载该 CSS 的硬开关：
• media 值必须是小写 print，不能是 Print、PRINT、prnt 或 all print
• 属性值必须用英文双引号包裹：media="print"，写成 media=print（缺引号）会导致解析失败
• 不要和 screen 混用：media="screen, print" 会让浏览器在页面加载时就拉取并解析 print.css，可能干扰正常渲染、增加首屏开销
• href 路径是相对于当前 HTML 文件的，比如 href="css/print.css"，不是相对于 CSS 文件自身
为什么改了 print.css 却看不到效果
90% 的“没生效”问题出在加载时机或缓存上，而不是 CSS 写得不对：
• 普通浏览状态下，DevTools 的 Styles 面板里根本看不到 print.css 的任何规则——这是正常行为，不代表它坏了
• Chrome / Edge 的打印预览会缓存 CSS 解析结果；仅刷新页面无效，必须在打印预览窗口中按 Ctrl+Shift+R（Windows）或 Cmd+Shift+R（macOS）强制重载
• 用 Network 面板过滤 print.css：如果页面一加载就发起请求，说明 media 属性值写错了；正确行为是只在打开打印预览或调用 window.print() 时才触发请求
• Safari 有时会卡住旧规则，可尝试在打印预览窗口中直接按 Cmd+R 刷新整个预览页
@media print 和 link[media="print"] 怎么选
两者都能用，但适用场景不同：
• 如果打印样式简单、逻辑少，直接在现有 CSS 文件里加 @media print { ... } 最省事，无需额外 HTTP 请求
• 如果打印样式复杂、需团队协作、或要彻底隔离（比如避免任何屏幕样式泄漏），用 <link rel="stylesheet" href="print.css" media="print"> 更可控
• 不推荐把整套 CSS 复制进 @media print 块——体积翻倍、权重易冲突、维护成本高
• @page 规则只能在 @media print 块内生效，且不能嵌套选择器，也不能写在 link[media="print"] 引入的文件之外
:hover、:focus、:active）在打印时自动失效，display: none 的元素不会参与分页计算，而 @page 和 break-inside: avoid 这类分页控制必须配合具体容器（比如 <tr>）才有效。</tr>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
