@media print样式被覆盖的根源是css层叠规则中声明顺序与选择器权重问题，需将print规则置于所有screen规则之后、避免高权重screen选择器、统一用.print-only/.print-hidden类控制，并在入口末尾import专用print.less文件。
print媒体查询被屏幕样式覆盖怎么办
Less本身不处理媒体查询优先级，冲突根源在CSS层叠规则：后定义的屏幕样式（如 @media screen）若选择器权重更高或位置靠后，会覆盖先写的 @media print 样式。这不是Less编译问题，而是输出CSS的加载顺序和特异性问题。
- 确保
@media print块写在所有@media screen块之后（尤其注意import顺序） - 避免用高权重选择器写屏幕样式，比如别用
body .header ul li a:hover这类长链去压 print 中的.print-only - 给打印专用类加
!important是临时解法，但暴露了结构缺陷；更稳妥的是统一用.print-hidden和.print-only类控制显隐
Less里怎么安全地组织print样式代码块
不要把 @media print 散落在各个文件里。推荐在主Less入口末尾统一 import 一个 print.less 文件，并在里面用嵌套写法保证作用域清晰：
.print-only {
display: none;
}
@media print {
.print-only {
display: block !important;
}
.print-hidden {
display: none !important;
}
// 重置字体、边距等
* {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
}
}
这样编译后，所有 print 规则集中、位置靠后，且通过类名控制比依赖元素状态更可控。
为什么用了 display: none 打印时还是显示
常见原因是浏览器打印预览缓存了旧CSS，或页面动态JS又把 .print-hidden 类移除了。另外，某些UI库（如Ant Design）自带的 @media print 规则可能在你代码之后加载，造成覆盖。
- 检查浏览器打印预览的“网络”面板，确认最终生效的CSS是否包含你的 print 规则
- 用开发者工具切换到打印媒体（DevTools → ⋯ → Rendering → Emulate CSS media → print），实时看哪些样式被禁用或覆盖
- 如果用了组件库，查它是否导出
print.css，有的需手动在@media print外层再包一层!important或提高选择器权重
Less变量和mixin能简化print样式维护吗
可以，但要小心变量作用域。不要在 @media print 块内重新定义变量，而应提前定义好打印专用值：
@print-font-size: 12px;
@print-line-height: 1.4;
<p>.print-content {
font-size: @print-font-size;
line-height: @print-line-height;
// 其他基础排版
}</p><p>@media print {
.print-content {
page-break-inside: avoid;
}
}</p>
真正容易被忽略的是分页控制：page-break-before、break-after 等属性在不同浏览器支持度差异大，Chrome 支持 break-inside: avoid，但 Safari 仍要回退到 page-break-inside: avoid —— 这类细节得靠实际打印测试，不能只信Less编译结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
