纯 CSS 无法实现页码的周期性循环（如 1-2-3-1-2-3），但可通过 JavaScript 动态注入页脚并结合 @media print 样式，在打印前按模运算生成循环页号，打印后自动清理，兼顾语义性与兼容性。
纯 css 无法实现页码的周期性循环（如 1-2-3-1-2-3），但可通过 javascript 动态注入页脚并结合 `@media print` 样式，在打印前按模运算生成循环页号，打印后自动清理，兼顾语义性与兼容性。
在 Web 打印场景中，CSS 的 @page 规则虽支持基础页码计数（如 counter(page)），但其计数器为全局、线性且不可重置或取模，因此原生不支持周期性页码逻辑（例如每 3 页循环显示 1/2/3）。要实现 1, 2, 3, 1, 2, 3… 这类效果，需借助 JavaScript 在打印生命周期中动态干预。
核心思路是：
✅ 将文档结构化为明确的“逻辑页”容器（如 .page）；
✅ 利用 window.beforeprint 事件，在浏览器触发打印前，遍历每个页面容器，计算 index % period 得到循环序号；
✅ 动态插入带样式的页脚元素（如 <div class="page-number">Page 2</div>）；
✅ 在 window.afterprint 中立即移除这些临时页脚，确保屏幕浏览时无干扰。
以下为可直接运行的完整示例（周期设为 3）：
<meta charset="UTF-8"><title>周期性打印页码</title><style>
@media print {
.page {
break-after: page; /* 替代已废弃的 page-break-after */
position: relative;
min-height: 100vh;
}
.page-number {
position: absolute;
bottom: 12px;
left: 0;
width: 100%;
text-align: center;
font-size: 12px;
color: #666;
margin: 0;
padding: 0;
}
/* 防止页脚被截断 */
@page {
margin-bottom: 24px;
}
}
/* 屏幕视图下隐藏页脚（仅打印时生效） */
.page-number {
display: none;
}
@media print {
.page-number {
display: block;
}
}
</style><div class="page"><p>第一章：引言内容...</p></div>
<div class="page"><p>第二章：方法论说明...</p></div>
<div class="page"><p>第三章：实验结果分析...</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>第四章：讨论与延伸...</p></div>
<div class="page"><p>第五章：结论与展望...</p></div>
<script>
const PERIOD = 3;
const PAGE_LABEL = 'Page';
window.addEventListener('beforeprint', () => {
document.querySelectorAll('.page').forEach((page, i) => {
const cycleNum = (i % PERIOD) + 1; // 从 1 开始循环：0→1, 1→2, 2→3, 3→1...
const footer = document.createElement('div');
footer.className = 'page-number';
footer.textContent = `${PAGE_LABEL} ${cycleNum}`;
page.appendChild(footer);
});
});
window.addEventListener('afterprint', () => {
document.querySelectorAll('.page-number').forEach(el => el.remove());
});
</script>
? 关键注意事项：
- ✅ 使用
break-after: page（现代标准）替代过时的page-break-after，提升 CSS 打印规范兼容性； - ✅
@page { margin-bottom }确保页脚有足够空间不被裁剪； - ✅ 页脚使用
position: absolute并置于.page内部，避免跨页错位； - ⚠️ 此方案依赖 JS，禁用 JavaScript 时将无页码——如需降级保障，建议服务端生成 PDF；
- ⚠️ 浏览器对
beforeprint/afterprint支持良好（Chrome/Firefox/Edge），但 Safari 旧版本可能触发时机不稳定，建议添加防重复插入逻辑（如检查.page-number是否已存在）。
总结：虽然 CSS 本身不具备编程能力，但通过“结构化 HTML + 打印生命周期钩子 + 模运算”，我们能优雅、可控地实现任意周期的页码循环。该模式灵活可扩展——只需修改 PERIOD 常量和 PAGE_LABEL，即可适配 1-2-1、1-2-3-4-5 或自定义序列（如 ['A','B','C']）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
