Question

我会先说这个问题，我之前已经问过这个问题，但我能找到的所有答案似乎都引用了一个不再适用的过时解决方案（至少在Firefox 56 [64位]中）

过时的方法是曾经有一个名为pages的自动实例化的CSS计数器，所以从这个SASS生成了一小段CSS：

footer {
    position: fixed;
    bottom: 0;
    left: 20px;

    &:after {
        counter-increment: page;
        content: "Page " counter(page) " of " counter(pages);
    }
}

用来做我想做的事。现在它显示“Page [x]为0”。

我尝试使用这个CSS来重新创建我自己的max-page计数器：

@page {
    counter-increment: maxpage;
}

然而，当在我的页脚中使用时，这也会返回0。

是否有任何合理的跨浏览器友好方式来获取此功能？

Answer 1

从CSS3开始，您可以在@page规则中指定计数器。这是一个例子：

@page { counter-increment: page }

上述规则指示布局引擎创建一个名为＆＃34; page＆＃34; （它按惯例称为页面，它可以是任何东西）。每个页面都会递增此计数器。与任何计数器一样，您可以在文档的任何位置使用计数器的当前值

例如，使用此CSS规则：

#pageNumber { content: counter(page) }

和这段HTML：

<span id="pageNumber"></span>

您可以使用当前页码计数器作为HTML文档中的内容。你甚至可以走得更远。假设您要在10处开始页码。然后，您可以使用@page：first规则将第一页的计数器重置为值9.

@page { counter-increment: page }
@page:first { counter-reset: page 9 }

两个规则的组合会将第一页的计数器重置为9.然后，对于每个页面（包括第一页），它将递增计数器。这导致第一页的计数器值为10，第二页的计数器值为11，依此类推。

您也可以使用纯CSS

示例：

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

理论上......在现实世界中，只有PrinceXML支持这一点。

Answer 2

不使用@page，但我在Firefox 20中使用了纯CSS页码：

CSS是：

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

HTML代码是：

<div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>

适用于大多数主流浏览器

Answer 3

根据mozilla docs，

<块引用>

CSS 计数器可让您根据内容调整内容的外观文档中的位置。

因此，如果您的 css 规则适用于多个元素，它将计算所有这些元素。如果您使用的页眉和页脚元素基本上在文档中出现 1 次并在打印中出现多次，则反增量将不起作用，因为在文档中它只有 1 次出现。

@media print

3 个答案: