media=”print”控制样式表仅在打印时生效，普通浏览时不参与渲染；它不启用打印功能，而是指定媒介适用性，需配合独立print.css文件及合理css规则使用。
link标签的media=”print”到底控制什么
它只影响引入的样式表在什么媒介下生效，不是“让页面能打印”，而是“告诉浏览器：这张样式表专供打印时用”。浏览器默认会同时加载所有，但只对当前媒介匹配的样式表应用规则。
- 如果没写
media="print"，样式表在屏幕和打印时都会生效，容易导致打印出错乱排版 - 写了
media="print"后，该样式表在普通浏览时完全不参与渲染（chrome DevTools 的 Styles 面板里都看不到），仅在打印预览或调用window.print()时激活 - 多个
media值可用逗号分隔，比如media="print, screen"，但实际中极少需要——屏幕样式和打印样式逻辑差异大，混在一起反而难维护
为什么加了media=”print”却没生效
最常见原因是样式优先级被覆盖，或者选择器在打印上下文中不匹配。打印时浏览器会重置很多默认样式（比如background-color默认不打印），且禁用部分CSS特性（如transform、animation）。
- 检查是否用了
!important强行覆盖了打印样式——这会让打印样式失效，因为屏幕样式优先级更高 - 避免依赖
:hover、:focus等伪类，打印时这些状态不存在 -
display: none在打印样式里要慎用：如果目标元素本身在屏幕样式里已是display: none，打印样式再设display: block可能无效（取决于层叠顺序） - 路径问题：确保
href指向的CSS文件真实存在，404时media="print"照样不生效
推荐的打印样式组织方式
别把打印样式硬塞进主样式表里用@media print包裹，而应拆成独立文件——更易调试、避免干扰屏幕渲染、方便按需加载。
- 在HTML中这样引入：
<link rel="stylesheet" href="print.css" media="print"> - 在
print.css里专注处理：隐藏导航/广告/侧边栏（.header, .ad-banner { display: none; }）、强制黑底白字（color: #000 !important; background: #fff !important;）、重设字体大小为pt单位（如font-size: 12pt;）、取消所有box-shadow和border（除非明确需要） - 不要在
print.css里写@media screen，那毫无意义；也别在里面引用@import，部分浏览器打印时会忽略
Chrome打印预览里样式不更新？
Chrome的打印预览缓存很顽固，改完print.css后常不自动刷新，尤其启用了“硬件加速”或安装了某些插件时。
立即学习“前端免费学习笔记（深入）”；
- 强制刷新打印样式：打开打印预览（
Ctrl+P/Cmd+P），关闭窗口，再重新打开；或按Ctrl+Shift+R重载整个页面（包括media="print"的资源） - 检查DevTools的Network面板，筛选
Media类型，确认print.css状态码是200且内容已更新 - 临时禁用所有扩展，某些广告拦截插件会阻止
media="print"资源加载
打印样式最难的不是写法，是验证——每次修改都要真机打印或PDF导出看效果，靠眼睛扫代码看不出page-break-inside: avoid有没有起作用。