html - CSS文件中的多个@page

Question

是否可以在一个 html 文件中包含多个@page 元素？由于打印一些文件，我正在寻找这种方法:

有多张发票，每张发票有多个页面。因此，与发票的后续页面(3 英寸)相比，每张发票第一页的页边距应该在页面顶部有另一个边距(1 英寸)。

所以，当我先添加@page { 时，第一页将有另一个上边距，这没问题。但是在打印几页之后，将开始新的发票，它再次需要 1 英寸而不是 3 英寸的上边距。但由于此页不是第一页，上边距将为 3 英寸。

理想的解决方案是拥有多个@pages，这样我就可以在每张新发票的开头开始一个新的@page，这将首先有一个新的@page，我可以给 1in top margin。

希望问题很清楚，在此先感谢您的帮助!

Answer 1

如果我没理解错的话，您正在打印一个包含多张发票的网页。如果是这样，那么 @page :first 将只影响第一张发票。也许您可以使用 CSS 的分页功能？例如:

@media print {
    body {
        margin: 2in 0;
    }
    .header {
        margin-top: -2in;
    }
    .footer {
        page-break-after: always;
    }
}
@page {
    margin: 1in;
}