应使用@media print而非额外link引入打印样式，因未加media="print"会导致屏幕样式冲突；@media print可复用主样式、精准控制分页与隐藏元素，且内联样式默认生效需显式重置。
打印页面时单独引入 CSS 样式，核心是用 @media print 做条件隔离，而不是另起一个 HTML 文件或手动切换样式表 —— 后者容易漏掉动态内容、破坏 DOM 结构，且无法响应浏览器原生打印预览。
为什么不能只靠 <link rel="stylesheet"> 引入新文件
直接加一个额外的 <link href="print.css" rel="stylesheet"> 看似简单，但实际会和屏幕样式冲突：浏览器默认把所有 rel="stylesheet" 都当作「始终生效」处理，除非显式用媒体查询隔离。如果你没加 media="print"，那这个文件在屏幕上也会加载并覆盖原有样式，导致页面错乱。
- 必须写成
<link href="print.css" rel="stylesheet" media="print"> - 如果用
@import，也得包在@media print { @import "print.css"; }里，否则无效 -
media="print"的样式表在屏幕浏览时不会被应用，但会被下载（可接受）；若想完全不下载，得用 JavaScript 动态插入
@media print 写法比外部文件更可控
对大多数项目，直接在主 CSS 文件末尾追加 @media print 块，比维护独立 print.css 更可靠 —— 它能复用已有选择器、继承关系和变量（如 CSS 自定义属性），避免因选择器重复或 specificity 不一致导致打印样式失效。
- 隐藏非必要元素：
@media print { .header, .nav, .ads { display: none; } } - 强制黑白色输出：
@media print { * { color: #000 !important; background: transparent !important; } } - 修复分页断裂：
@media print { h2 { break-after: avoid; } } - 注意：
!important在 print 媒体中依然有效，但仅用于覆盖屏幕样式；不要滥用，优先靠 specificity 和顺序控制
内联样式和 style 标签在打印中会被忽略？
不会被忽略，但行为有差异。内联样式（style="..."）和 <style></style> 标签里的规则，默认在打印时仍生效 —— 它们没有媒体限制。问题常出在开发者误以为「没写 @media print 就不会影响打印」，结果发现按钮背景色、浮动布局等在打印页里依然顽固存在。
- 解决方案不是删掉内联样式，而是用
@media print显式重置：@media print { [style] { background: none !important; } } - 更稳妥的做法是：所有影响打印的样式，统一收口到
@media print块里，包括字体、边距、颜色、分页等 - 特别注意
display: none和visibility: hidden：前者在打印中真正隐藏，后者仍占位、可能触发分页异常
真正容易被忽略的是分页控制和内容截断 —— 比如长表格跨页被砍成两半、页眉页脚位置漂移、或伪元素（::before/::after）在打印中不渲染。这些没法靠「引入一个新 CSS 文件」解决，得结合 @page 规则和具体元素的 break-inside、orphans 等属性逐个调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
