@media print 隐藏元素必须写在媒体查询块内，否则会永久隐藏；display: none 在打印预览中无效是因为浏览器仅在触发打印时解析该规则；常见失效原因包括使用 visibility: hidden 或 opacity: 0、样式表 media="screen"、内联样式覆盖及框架类未编译；最稳做法是自定义带 !important 的语义化类并置于样式表末尾；对 position: fixed 等元素需组合 visibility: hidden 和 pointer-events: none；最终应通过 devtools 的 computed 面板切换 print 媒介验证 display 计算值。
@media print 隐藏元素必须写在媒体查询块内，否则会永久隐藏——这不是“打印时隐藏”，而是“页面加载就消失”。
为什么 display: none 在打印预览里没反应？
浏览器只在触发打印（Ctrl+P 或 window.print()）时才解析 @media print 规则。你改完 CSS 刷新页面看不到变化，不代表写错了，只是还没进打印模式。
常见失效原因：
-
visibility: hidden或opacity: 0写在@media print里，但它们不影响布局，打印引擎仍可能渲染内容 - 样式表用了
media="screen"，导致@media print规则根本没加载 - 目标元素带内联样式，比如
style="display: block"，直接覆盖了你的display: none
@media print 规则怎么写才真正生效？
别依赖框架内置类（比如 Bootstrap 的 d-print-none），CDN 版本默认不编译打印工具类，写了也白写。
最稳做法是自己定义语义化类，并用 !important 确保压过其他规则：
@media print {
.no-print,
nav,
aside,
.ad-banner,
.header-actions {
display: none !important;
}
}
关键点：
- 把这段 CSS 放在自定义样式表末尾，确保加载顺序在 Bootstrap 或其他框架之后
- 避免用 ID 选择器（如
#sidebar），ID 权重太高反而容易被其他规则意外覆盖 - 不要只写
.no-print { display: none; }——少了!important就大概率被 Bootstrap 的body * { visibility: hidden; }覆盖
哪些元素光靠 display: none 还不够？
某些定位或动画元素在旧版 Chrome/Edge 打印时仍可能留白或错位：
-
position: fixed元素（如“回到顶部”按钮、“悬浮客服”） - 含
transform或will-change的容器
稳妥方案是组合声明：
@media print {
.back-to-top {
visibility: hidden !important;
pointer-events: none !important;
}
}
注意：visibility: hidden 单独用不行，但配合 pointer-events: none 可防止交互干扰，对 fixed 元素的打印行为更稳定。
真正麻烦的不是写几行 CSS，而是确认最终生效的 display 值——打开 Chrome DevTools 的 “Computed” 面板，切到 print 媒介，直接查目标元素的 display 计算结果。别猜，得看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
