display: none 在打印预览中不生效是因为仅在触发打印（ctrl+p 或 window.print()）时才应用 @media print 规则；常见原因包括误用 visibility/opacity、screen 介质样式表未加载、内联样式覆盖等。
为什么 display: none 在打印预览里不生效？
浏览器只在触发打印预览（Ctrl+P）或调用 window.print() 时才应用 @media print 规则，平时页面上完全看不到效果。很多人改完 CSS 就刷新页面看，发现元素还在——这不表示样式错了，只是没进打印模式。
常见错误现象包括：
-
visibility: hidden或opacity: 0写在@media print里，但打印时元素仍出现（它们不影响布局和打印输出） - 用了
media="screen"的<link>标签引入样式表，导致print.css根本没加载 - 元素带内联样式如
style="display: block"，覆盖了@media print中的display: none
怎么写可靠的 @media print 隐藏规则？
优先用语义化类名控制，而不是靠结构选择器硬写。比如给导航栏、广告位统一加 class="no-print"，再集中处理：
@media print {
.no-print,
nav,
aside,
.ad-banner,
.header-actions {
display: none !important;
}
}
这样做的原因：
-
.no-print类权重低但可控，比article > header这类嵌套选择器更不容易被屏幕样式覆盖 - 避免用 ID（如
#sidebar），ID 选择器权重高，反而容易在打印时被其他规则意外压过 -
!important是必要的，尤其要对抗内联样式或高权重组件样式（Vue/React SSR 渲染后 DOM 结构若与客户端不一致，也可能导致失效）
哪些元素不能只靠 display: none？
部分定位元素在某些浏览器中即使 display: none 仍可能留下空白或错位，特别是：
-
position: fixed元素（如“回到顶部”按钮、“悬浮客服”）：部分旧版 Chrome 和 Edge 仍会保留其占位 - 含
transform或will-change的动画容器：打印引擎可能未完全重置渲染状态
稳妥做法是组合使用：
@media print {
.back-to-top {
visibility: hidden !important;
pointer-events: none !important;
}
}
注意：visibility: hidden 单独用不行，但配合 pointer-events: none 可防止交互干扰，且对 fixed 元素的打印行为更稳定。
外部打印样式表要不要拆？
推荐拆，尤其是中大型项目。把打印样式单独抽成 print.css 并用 media="print" 引入：
<link rel="stylesheet" href="screen.css" media="screen"><link rel="stylesheet" href="print.css" media="print">
好处很实际：
- 开发时能快速定位打印相关样式，不用在主 CSS 里翻
@media print块 - 避免屏幕样式中误写的
!important泄露到打印逻辑里 - SSR 场景下更可控——服务端可只注入
screen.css，客户端按需加载print.css，减少首屏体积
真正容易被忽略的是：打印样式不是独立世界，它和屏幕样式共享同一套层叠规则。你写的每一条 display: none，都得经得起权重、来源顺序、!important 层级的三重校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
