这是一段 HTML/CSS 代码，由于 CSS 的计数器，它应该在打印时在页脚中打印页码:
<html>
<head>
<style type="text/css">
body {
counter-reset: page;
}
div.footer {
display: table-footer-group;
position: fixed;
bottom: 0pt;
right: 0pt;
}
div.footer:after {
counter-increment: page;
content: "Page " counter(page);
}
p {
page-break-after: always;
}
</style>
</head>
<body>
<div class="footer"></div>
<p>Hello world page 1</p>
<p>Hello world page 2</p>
</body>
</html>
事实是，在 Firefox 79.0 中，我在第一页上看到“Page 1”，在第二页上看到“Page”。使用 Chrome 84.0，我在两个页面上都显示“Page 1”。
我尝试使用 @page at-rule，原生“页面”计数器(如 w3 中所述)，我仍然找不到我丢失的东西。
非常感谢您的帮助:)
最佳答案
我认为您无法实现您的目标。您获得“第 1 页”的原因是因为您在 div.footer:after 声明中递增计数器，它在您的 HTML 代码中只出现一次。
CSS 计数器在读取时是根据该元素在文档中的位置计算的，如规范中所述:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
所以在你的情况下，你可以这样想:
div.footer:after {
content: "Page " counter(page); /* when displayed, read the value of `page` */
}
p {
counter-increment: page; /* counter increments with every occurrence of a <p> tag */
}
和
<div class="footer"></div> <!-- `page` counter is always 0, as no occurrences of a <p> tag yet -->
<p>Hello world page 1</p> <!-- sets counter to 1 -->
<p>Hello world page 2</p> <!-- sets counter to 2 -->
或
<p>Hello world page 1</p> <!-- sets counter to 1 -->
<div class="footer"></div> <!-- `page` counter is always 1, as there was a single occurrence of a <p> tag -->
<p>Hello world page 2</p> <!-- sets counter to 2 -->
或
<p>Hello world page 1</p> <!-- sets counter to 1 -->
<p>Hello world page 2</p> <!-- sets counter to 2 -->
<div class="footer"></div> <!-- `page` counter is always 2, as there were two occurrences of a <p> tag -->
关于html - 无法找到使反增量工作的方法(Chrome/Firefox)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63473414/