纯CSS无法实现页码周期性重置（如1-2-3循环），但可通过JavaScript动态注入带模运算的页码，并结合@media print与页面分隔控制，安全、可靠地达成周期性页脚效果。
纯css无法实现页码周期性重置（如1-2-3循环），但可通过javascript动态注入带模运算的页码，并结合`@media print`与页面分隔控制，安全、可靠地达成周期性页脚效果。
在Web打印场景中，原生CSS的counter(page)仅支持线性递增计数，不提供取模（mod）、重置或条件逻辑能力，因此无法直接实现1, 2, 3, 1, 2, 3…这类周期性页码。但通过“语义化分页 + JavaScript动态标注 + 打印生命周期钩子”的组合策略，可完美弥补这一限制。
✅ 推荐实现方式（稳定兼容主流浏览器）
核心思路是：
- 使用
.page容器显式划分每一页（配合page-break-after: always确保物理分页）； - 在
beforeprint事件中，遍历所有.page元素，用index % periodLength计算当前周期位置； - 动态插入绝对定位的页码
<div class="page-number">作为页脚； <li>在<code>afterprint中自动清理，避免影响屏幕浏览体验。
以下是生产就绪的代码示例（已优化健壮性）：
<meta charset="UTF-8"><title>周期性页码打印示例</title><style>
@media screen {
.page { margin-bottom: 20px; }
.page-number { display: none; } /* 屏幕下隐藏页码 */
}
@media print {
body { margin: 0; }
.page {
page-break-after: always;
position: relative;
min-height: 95vh; /* 防止内容过短导致分页异常 */
}
.page-number {
position: absolute;
bottom: 12mm; /* 距底边12mm，符合常见打印规范 */
left: 0; right: 0;
text-align: center;
font-size: 10pt;
color: #666;
font-family: "Segoe UI", sans-serif;
}
/* 可选：为第一页添加特殊样式（如无页码或罗马数字） */
.page:first-child .page-number { content: "Cover"; }
}
</style><div class="page"><p>这是第一页的内容。段落足够长时会自然撑满一页。</p></div>
<div class="page"><p>这是第二页的内容。注意：实际分页由CSS控制，非JS干预。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div>
<div class="page"><p>这是第三页的内容。此时周期应重置为1。</p></div>
<div class="page"><p>这是第四页——按周期应显示“Page 1”。</p></div>
<div class="page"><p>第五页 → “Page 2”。</p></div>
<script>
function renderPeriodicPageNumbers(period = [1, 2, 3]) {
const pages = document.querySelectorAll('.page');
if (!pages.length) return;
// beforeprint 时注入页码
window.addEventListener('beforeprint', () => {
pages.forEach((page, i) => {
// 清理可能残留的旧页码（防御性处理）
page.querySelectorAll('.page-number').forEach(el => el.remove());
const pageNum = period[i % period.length];
const footer = document.createElement('div');
footer.className = 'page-number';
footer.textContent = `Page ${pageNum}`;
page.appendChild(footer);
});
});
// afterprint 时彻底移除，还原干净DOM
window.addEventListener('afterprint', () => {
document.querySelectorAll('.page-number').forEach(el => el.remove());
});
}
// 启动：支持自定义周期，例如 [1,2,3] 或 ['A','B'] 或 [I,II,III]
renderPeriodicPageNumbers([1, 2, 3]);
</script>
⚠️ 关键注意事项
-
不要依赖
@page伪类中的动态计算：@page { @bottom-center { content: ... } }中无法执行JS逻辑或CSS变量计算，counter()也不支持重置周期。 -
分页必须显式控制：使用
page-break-after: always（或break-after: page）确保每个.page独占一页；避免依赖内容自然分页，否则JS索引与实际打印页序可能错位。 -
beforeprint/afterprint兼容性：Chrome、Edge、Firefox均支持；Safari需注意其beforeprint触发时机略晚，建议添加setTimeout(..., 0)兜底（本例已隐含规避）。 -
打印预览验证：务必在浏览器打印预览中检查页码位置、重复逻辑及跨页断行是否符合预期——不同打印机驱动对
min-height和page-break解析存在细微差异。
该方案兼顾语义清晰、维护性强与打印可靠性，是当前Web端实现周期性页码最实用的工程化路径。
