如何通过CSS实现打印文档的周期性页码编号？

可以用CSS实现这种周期性重复的页码，核心是通过calc()结合内置的page计数器做取模运算，生成循环序列。

默认的page计数器是连续递增的，我们可以通过公式 (counter(page) - 1) % 周期长度 + 1，把连续页码转换为从1开始的循环序列。

示例代码（周期为3的情况） #

@page {
  @top-center {
    content: calc( (counter(page) - 1) % 3 + 1 );
  }
}

调整周期 #

如果需要其他周期（比如1,2循环），只需要修改公式中的周期数值即可：

@page {
  @top-center {
    content: calc( (counter(page) - 1) % 2 + 1 );
  }
}

现代主流浏览器（Chrome、Firefox、Edge等）都支持这种写法，旧版浏览器可能存在兼容性问题，建议在目标环境中测试验证。

内容的提问来源于stack exchange，提问作者Oleksandr Fomin