打印时元素不消失需确认@media print是否生效，必须用display: none而非visibility: hidden，避免media="screen"限制，优先使用.no-print类+!important控制，慎删DOM。
打印时某些元素不消失？检查 @media print 是否生效
浏览器只在实际触发打印预览或调用 window.print() 时才应用 @media print 规则，平时在页面上完全看不到效果。很多人改了 CSS 却以为没起作用，其实是没进打印预览模式。
常见错误现象：display: none 在普通页面里生效了，但一打开打印预览，那些元素还在；或者用了 visibility: hidden，结果打印时照样出现——因为 visibility 不影响布局和打印输出。
- 必须用
display: none，不能用visibility: hidden或opacity: 0 - 确保样式表未被
media="screen"属性限制（比如<link rel="stylesheet" media="screen" href="...">会跳过 print） - 内联样式优先级高于
@media print，如果元素带style="display: block"，得用!important覆盖
怎么精准隐藏导航栏、侧边栏这些「非内容区」？
别一股脑给所有 .header .sidebar 加 display: none，容易误杀打印需要的页眉页脚。更稳妥的做法是打上语义化类名，再统一控制。
使用场景：文章页、后台报表页、管理后台详情页等有固定 UI 区域的页面。
立即学习“前端免费学习笔记（深入）”；
- 给不需要打印的区域加类名，比如
class="no-print"，然后写@media print { .no-print { display: none !important; } } - 避免用 ID 或深层嵌套选择器（如
#app div aside），打印样式表优先级低，容易被覆盖 - 如果用框架（如 Vue/React），注意 SSR 渲染后 DOM 结构是否和客户端一致，否则服务端生成的打印样式可能不生效
display: none 在 @media print 里为什么有时失效？
根本原因通常是层叠顺序或选择器权重不够，而不是语法错。CSS 打印样式不是独立世界，它和屏幕样式共享同一套层叠规则。
性能 / 兼容性影响：几乎所有现代浏览器都支持 @media print，但老版 IE（≤10）对 !important 在媒体查询里的处理有 bug，需额外测试。
- 检查是否有更高权重的选择器在屏幕样式中设置了
display: block，比如article > header比.no-print权重高 - 不要依赖
display: none隐藏含position: fixed的元素（如回到顶部按钮），部分浏览器仍会打印其占位；改用visibility: hidden+pointer-events: none组合更稳 - 动态插入的元素（如 toast、modal）如果没带
no-print类，且 JS 插入时没同步处理打印样式，就会漏掉
打印前要不要删 DOM？还是纯靠 CSS 控制？
纯 CSS 控制是首选，删 DOM 是下策。DOM 删除会破坏可访问性（aria-live、焦点管理）、影响分析埋点，还可能引发 React/Vue 的 reconciliation 异常。
只有极少数情况需要操作 DOM：比如某个第三方组件强行内联了 display: block 且无法覆盖，或者要移除打印时会触发网络请求的 widget（如广告 iframe）。
- 优先走
@media print+display: none+!important路线 - 若必须删 DOM，建议在
beforeprint事件里做，并在afterprint里恢复，避免影响用户后续操作 - 注意：Chrome 98+ 已废弃
beforeprint/afterprint，改用matchMedia('print').addEventListener('change', ...)，但兼容性不如原事件稳定
真正难的不是写那行 display: none，而是判断哪些元素「看起来无关」但其实承载着打印必需的信息——比如页码、来源链接、数据更新时间。这些往往藏在 footer 里，一并 no-print 就全没了。
