CSS paged media :last page selector

问题

I need to know if I can modify content on the last page with the :last selector.

I'm not sure if it exists, I see it being used in other stackoverflow answers like this: Footer on last printed page. But I can't find it in the documentation and it does not work when I try to use it.

I'm trying to clear the content on the footer of my last page like this:

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

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

It works when I use it with the :firstselector. How can I get the effect for the last page?

I'm using Weasyprint to print PDF files.

回答1:

Based on the CSS3 Page docs it appears the :last pseudo-class was removed (or never included).

It might be possible to target the last page using the :blank pseudo-class if you can force a page break at the end of your document. This might have unwanted effects on other blank pages though.

回答2:

This can be achieved using named pages.

Create an element on the last page (or use an existing one that will appear on the last page) and assign it a last-page class.

Example below:

HTML

<div class="last-page"></div> <!-- Or add this class name 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;
    }
}

Tested with Weasyprint - worked a charm.

来源：https://stackoverflow.com/questions/42136333/css-paged-media-last-page-selector

标签

css

css-paged-media