最可靠方法是用@media print {.no-print{display:none!important}}隐藏非打印元素，需加!important覆盖高权重样式，禁用visibility:hidden因仍占位，必须显式隐藏导航栏、广告容器等冗余区域。
如何用 @media print 隐藏导航栏和广告区域
直接写 display: none 在 @media print 里，但必须确保选择器足够精确，否则可能误藏正文或按钮。常见错误是用过于宽泛的类名（比如 .header 或 .ad），结果把打印需要的标题也干掉了。
推荐做法是给非打印元素加明确语义类，例如：class="no-print"，然后统一控制：
@media print {
.no-print { display: none !important; }
}
注意：!important 是必要的——因为内联样式或高权重选择器（如 #nav ul li）可能覆盖媒体查询规则。
visibility: hidden 和 display: none 在打印时的区别
display: none 会彻底移除元素的布局空间，适合导航、侧边栏、广告容器这类不需要占位的区域；visibility: hidden 仍保留空白位置，可能导致页边距错乱或分页异常，打印时基本没用。
立即学习“前端免费学习笔记（深入）”；
除非你有特殊需求（比如想留白但不显示内容），否则一律用 display: none。
-
display: none→ 元素不参与打印流，安全可靠 -
visibility: hidden→ 打印引擎仍按原尺寸预留空间，容易导致内容被截断或空白页 -
opacity: 0→ 完全无效，打印时照样输出
哪些元素必须显式隐藏才能保证打印效果
浏览器默认不会隐藏任何元素，即使它们对打印毫无意义。以下几类最容易被忽略，但实际影响极大：
- 固定定位的导航栏：
.navbar-fixed-top、header[role="navigation"] - 广告容器：
.ad-banner、[data-ad]、.sponsored-content - 交互控件：
.print-hide、.js-toggle-menu、所有button和input（除非是表单提交用） - 第三方脚本注入的浮动层：
.taboola、.taboola-container、#taboola-right-rail
建议在 CSS 开头集中定义一个打印清除区块，避免零散声明漏掉：
@media print {
.navbar, .sidebar, .ad-banner, .no-print, [data-no-print] {
display: none !important;
}
}
为什么有些元素用了 @media print 还是打印出来了
最常见原因是 CSS 加载顺序或优先级问题。比如框架样式（Bootstrap、Tailwind）或组件库的样式表在你的打印规则之后加载，就会覆盖掉你的 display: none。
解决方法只有两个：
- 把打印样式放到所有其他 CSS 的最后（包括
<link>标签顺序） - 对关键选择器加
!important，别怕——打印样式本来就需要强干预 - 检查是否用了
all: unset或all: initial等重置规则，它们会清掉@media print的设置
另外，某些 CMS 或前端框架（如 Next.js、Nuxt）会做 CSS in JS 或 SSR 样式隔离，@media print 规则若没被正确注入到 head 中，就根本不起作用。
