打印样式被屏幕样式覆盖需提升选择器权重、显式隐藏无关元素、用pt单位和page-break控制分页，并通过真机打印验证效果。
打印样式被屏幕样式覆盖怎么办
根本原因是浏览器默认的 @media print 优先级不比屏幕样式高，哪怕写在 CSS 文件末尾，只要选择器权重相同，屏幕样式（@media screen 或无媒体查询）仍会生效。
- 用更具体的选择器：比如把
.header改成@media print { body .header }，靠增加层级提权 - 避免用
!important—— 它在打印时可能被忽略，或导致后续调试混乱 - 检查是否启用了「背景图形」打印选项：Chrome 默认关闭
backgrounds，即使写了background: #fff也可能不显示，得手动勾选「打印背景图形」
哪些元素必须显式隐藏
导航栏、侧边栏、广告位、交互按钮这些对纸面毫无意义，但不会自动消失。CSS 打印样式里没声明，它们就照常渲染 —— 常见结果是页眉挤占正文、分页错乱、多出空白页。
- 统一收口：用
@media print { .nav, .sidebar, .ads, .btn } { display: none; } - 慎用
visibility: hidden：它保留盒模型空间，可能导致内容错位；display: none才真正移除布局影响 - 注意动态插入的内容：JS 渲染的弹窗、加载提示（如
.loading）也得一并加进隐藏列表
字体、尺寸和分页怎么调才不崩
屏幕用 rem 或 em 很方便，但打印时字号缩放不可控；px 在高 DPI 打印机上又容易糊；分页不当则文字被硬切、表格跨页断裂。
- 字号统一用
pt（12pt ≈ 16px），这是印刷标准单位，浏览器打印预览最稳 - 关键容器加
page-break-inside: avoid（如.card, table），防止内部被截断 - 避免在
h1后直接跟大段p：中间插个page-break-after: avoid更可靠 - 测试时别只看「打印预览」—— 真机打印一次，有些打印机驱动会二次缩放，尤其 A4 尺寸偏差明显
如何快速验证 print 样式生效了
开发者工具里的「模拟媒体类型」开关不是万能的，它只改渲染，不触发真实分页逻辑，很多问题要到打印输出那一刻才暴露。
- Chrome DevTools → 「⋯」→ More Tools → Rendering → 勾选「Emulate CSS media type」→ 选
print，可快速看样式是否加载，但分页线不准 - 真验证法：按
Ctrl+P（Win）或Cmd+P（Mac），在打印预览里点「更多设置」→ 关掉「页眉页脚」→ 开启「背景图形」→ 拉动缩放看分页是否合理 - 加个临时 debug 规则：
@media print { * { outline: 1px solid red !important; } }，能一眼看出哪些元素还活着
实际调的时候，最耗时间的往往不是写样式，而是反复打印试错——不同浏览器对 page-break 的实现差异、打印机驱动对 CSS 的兼容程度、甚至纸张尺寸设置错误，都会让预览和实打效果差一截。留一台能连打印机的机器专用于验证，比纯靠眼睛猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
