处理怎么修复时,先确认真正讨论的是为什么 @media print 里的选择器完全不触发、.header { display: none; } 在 Safari 打印预览里还显示?、JS 动态插入的 .modal 或 .toast 打印时还在页面上,再顺着问题展开。
根本原因是@media print未打开打印解析流程或被高权重屏幕样式覆盖:link必须显式设media="print",@import须置于CSS最顶部,且需用Cmd+P真实预览验证,禁用懒;根本原因不是选取器写错了,而是它压根没进打印样式解析流程,或者被更高权重的屏幕样式盖掉了;为什么 @media print 里的选取器完全不触发Safari 和 Chrome 对 @media print 的加载逻辑极其苛刻:如果 <link> 标签没带 media="print"。@import 更危险——必须放在 CSS 文件最顶部,写在 @media print { } 里面等于白写;检查最终 HTML 源码,确认 <link rel="stylesheet" media="print" href="print.css"> 真实存在且返回 200用 DevToo;若被构建工具懒加载(如 Vite 的 import() 动态引入),它大概率不会进打印上下文别把打印样式混在主样式表里,尤其当它被 Bootstrap 或 Tailwind 这类框。} 在 Safari 打印预览里还显示;这不是语法问题,是特异性(specificity)被碾压了;比如 Bootstrap 的 .navbar.navbar-light 带。