CSS 分页媒体：最后一页选择器

Question

我需要知道是否可以使用

:last

选择器修改最后一页上的内容。

我不确定它是否存在，我看到它被用在其他 stackoverflow 答案中，如下所示：最后打印页面上的页脚。 但我在文档中找不到它，并且当我尝试使用它时它不起作用。

我正在尝试清除最后一页页脚上的内容，如下所示：

@page {
        @bottom-right {
            content: "Please turn over";
        }
}

@page :last {
        @bottom-right {
            content: none;
        }
}

当我将它与

:first

选择器一起使用时，它就可以工作。如何才能得到最后一页的效果？

我正在使用 Weasyprint 打印 PDF 文件。

Answer 1

这可以使用命名页面来实现。

在最后一页上创建一个元素（或使用将出现在最后一页上的现有元素）并为其分配一个

last-page

类。

以下示例：

HTML

<div class="last-page"></div> <!-- Or add this class to an existing element that appears on the last page -->

CSS

.last-page {
    page: last_page;
    page-break-before: always; /* Use if your last page is blank, else omit. */
}

@page {
   @bottom-right {
       content: "Please turn over";
    }
}

@page last_page {
    @bottom-right {
        content: none;
    }
}

使用 Weasyprint 进行测试 - 效果很好。

Answer 2

根据 CSS3 页面文档，似乎

:last

伪类已被删除（或从未包含）。

如果您可以在文档末尾强制分页，则可以使用

:blank

伪类定位最后一页。但这可能会对其他空白页面产生不良影响。

Answer 3

如Matt Doyle 的回答中所述，您可以使用基于CSS分页媒体模块规范的命名页面。然而，分页媒体和相关CSS还没有被浏览器完全实现。在它们受到支持之前，您可以使用 Paged.js 作为 polyfill：

Paged.js 是一些 CSS 属性的填充，用于从浏览器打印 HTML。 Paged.js 旨在实现的 W3C CSS 模块如下：

• CSS 分页媒体模块级别 3
• CSS 为分页媒体模块生成内容
• CSS 碎片模块级别 3

要将 Paged.js 用作 polyfill，请将下面的行复制到文档的

head

。

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>