@page :first 仅在 Firefox 真实打印预览中有效，Chrome/Edge 不支持，Safari 支持差；它只作用于浏览器自动生成的首张物理打印页，不适用于强制分页，且仅接受 margin、size 等有限属性。
为什么 @page :first 有时完全不生效
因为 @page :first 只在「物理打印输出的第一张纸」上起作用，且仅对**由浏览器自动生成的分页**有效——它不适用于你用 page-break-before 或 break-before: page 强制切出的“第一页”。更关键的是：Chrome 和 Edge 目前（2024）根本**不支持 @page :first**，Firefox 支持但仅限于真实打印预览（不是 DevTools 的“打印模拟”模式），Safari 支持度最差。所以如果你在 Chrome 里调试时发现样式没应用，不是写错了，是它压根不认。
-
@page :first不会触发重排，也不影响 DOM 渲染，只作用于最终输出的第一页纸面 - 必须配合
margin、size等属性使用，单独写@page :first { color: red }是无效的（@page规则只接受有限的 CSS 属性） - 如果页面内容不足一页，
:first仍会匹配——但若你用break-after: page在开头强行分页，那“第一张纸”可能只剩空白，导致你以为失效
@page :left 和 @page :right 的实际约束条件
这两个伪类只在双面打印（duplex）、且文档总页数为偶数时才稳定可用；浏览器必须开启「装订线」或「镜像边距」逻辑，否则左右页判断会错乱。它们不是靠元素位置判断，而是依赖打印机输出时的页面顺序编号：奇数页算 :right，偶数页算 :left（无论内容是否真的在左/右半边）。
- 必须设置
@page { margin-left: 2cm; margin-right: 1cm; }这类具体值，不能用auto或百分比 - 若用
size: A4 landscape，左右页方向仍按纸张物理方向计算，不是屏幕方向 - Firefox 中需启用
print.print_duplex首选项才能触发左右页识别；Chrome 完全忽略这两个伪类
真正可控的分页起点：用 break-before: page 配合 @page
与其赌 :first 是否生效，不如主动控制分页位置。把关键内容（如封面、章标题）用 break-before: page 推到新页，再用普通 @page 设置该页样式。这是目前跨浏览器最稳的方式。
- 给封面加
div.cover { break-before: page; }，然后写@page { size: A4; margin: 2cm; }即可统一控制所有“被推出来”的新页 - 避免在浮动元素、flex 容器子项或
position: absolute元素上设break-before，这些场景下行为不可靠 - 如果某页需要不同边距（比如封面要更大上边距），得用
@page :first { margin-top: 4cm; }——但记住：只 Firefox 能用，其他浏览器 fallback 到普通@page
打印样式调试时最容易忽略的三件事
DevTools 的「打印预览」模式和真实打印机输出差异极大，很多问题只有真打出来才暴露。
立即学习“前端免费学习笔记（深入）”；
- 浏览器缩放比例会影响分页结果，调试时务必把缩放调回 100%，不要信「适合页面」这种自动缩放
-
visibility: hidden或display: none的元素仍可能占位并影响分页位置，要用print-only类配合@media print彻底移除 - CSS 变量在
@page规则里不可用，@page { margin: var(--print-margin); }会直接被忽略
分页控制本质是浏览器和打印机驱动共同协商的结果，@page 伪类只是请求，不是指令。越想精确控制，越得接受部分效果不可控——尤其是跨浏览器时。
