如何通过HTML与CSS实现打印时content1仅首尾页、content2在非首尾页的底部展示

你之前写法失效的核心原因 #

首先要明确CSS的规则边界：@page 属于分页上下文的专属选择器块，块内仅允许配置分页盒子本身的属性（比如页边距、出血位、页码占位区域），完全不支持嵌套普通DOM元素的选择器。你之前在@page :first里写.content1、.content2的样式逻辑，属于不被规范允许的无效语法，浏览器会直接整段忽略——这不是Chrome兼容性问题，是写法本身从一开始就不符合规则。
另外需要明确：截至目前所有主流浏览器的实现中，CSS分页规范里还没有落地可用的末页定位选择器，纯CSS方案无法精准识别打印文档的最后一页。

可落地的实现逻辑 #

1. 首页内容的正确控制方式 #

放弃在@page块内嵌套DOM选择器的思路，正确的首页适配要分两层写：

• 用@page :first仅配置首页的页边距，给底部预留足够的展示空间，这部分是@page块唯一允许写的内容
• 用@media print媒体查询控制DOM元素的显隐，利用固定定位让底部内容在打印时贴在每页底部的边距位置：
  示例代码结构：

  @media print {
    /* 所有底部内容默认跨页固定在打印区域底部 */
    .content1, .content2 {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      /* 避开打印的页边距，防止内容被裁切 */
      margin-bottom: 1cm;
    }
    /* 默认规则：非首页场景下，content1隐藏、content2显示 */
    .content1 { display: none; }
    .content2 { display: block; }
  }
  @page :first {
    /* 仅配置首页的边距参数，给底部内容留位 */
    size: A4;
    margin: 2cm;
    margin-bottom: 2cm;
  }
  

  这部分写完后，只需要在首页打印时，临时把.content1的显示状态打开、把.content2的状态隐藏，就可以完成首页的内容适配。

2. 末页内容的适配（必须配合轻量JS实现） #

因为没有原生的末页选择器，需要靠JS在打印前快速计算当前文档的总打印页数：

• 实现逻辑非常轻量，不需要引入重型库：
  1. 监听beforeprint事件，在触发打印前，按照标准A4的有效内容高度（总高度减去上下边距）遍历文档流的元素偏移值，计算出当前内容打印时会拆成多少页
  2. 计算完成后动态切换两个元素的显隐状态：
     • 如果总页数为1：只显示.content1，隐藏.content2
     • 如果总页数大于1：首页显示.content1、隐藏.content2；中间所有页隐藏.content1、显示.content2；最后一页隐藏.content2、显示.content1
• 固定定位的底部元素本身就会在所有打印页重复渲染，不需要额外给每个分页手动插入内容，只要根据总页数控制初始显隐状态即可满足规则。

常见避坑点 #

• 永远不要在@page块内部写针对普通DOM元素的选择器，所有浏览器都不支持这种写法，写了也不会生效
• 不要强行追求纯CSS实现末页识别，目前没有任何主流浏览器落地了末页定位的伪类能力，纯CSS方案在这个需求上是无解的
• 固定定位的打印内容一定要预留足够的边距距离，不要贴在纸张最边缘，否则很容易被打印机的硬件裁切区域切掉

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