找不到使反增量工作的方法（Chrome/Firefox）答案

【问题标题】：Cannot find a way to make counter-increment work (Chrome/Firefox)找不到使反增量工作的方法（Chrome/Firefox）
【发布时间】：2020-08-19 01:35:43
【问题描述】：

这是一段 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，我在两个页面上都得到“第 1 页”。

我尝试使用@page at-rule，本机“页面”计数器（如w3 所述），我仍然找不到我缺少的东西。

非常感谢您的帮助:)

【问题讨论】：

我很害怕这是一个已知的错误......你可以在这里查看类似的问题以找出答案......stackoverflow.com/questions/50681472/…（以及其他问答）

标签： html css pagination

【解决方案1】：

我认为您无法实现自己的目标。您获得“第 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 -->

【讨论】：

您可能想要做的是在每个“页面”块上都有一个<div class="footer">，它将正确显示每个单独页面的计数器。