CSS分页媒体：如何为第一页上的元素设置差异化样式？

你当前的代码里，@page:first只是设置了第一页的页面背景和边距，并不会直接改变页面内.magic-box元素的样式——页面背景和元素背景是两个独立的层级，所以第一页的.magic-box还是会显示绿色背景。

核心难点在于：原生CSS目前没有通用的选择器能直接判断某个元素位于哪一页（动态内容的分页会随打印尺寸变化），但可以通过以下几种方式解决：

1. 实验性CSS方案（仅现代浏览器支持） #

Chrome 119+支持page()函数，可以直接匹配位于指定页码的元素：

@page{
    size:3.5in 2in;
    marks:crop;
    bleed:0.125in;
    margin:0.25in;
} 

@page:first{
    margin:0;
}

body{
    font-size:10pt;
}

.magic-box{ 
  background: green;
}

/* 匹配第一页内的所有.magic-box */
.magic-box:is(:page(1)) {
  background: blue;
}

2. 兼容型JS+CSS方案 #

利用第一页和其他页的边距差异（第一页margin为0，其他页为0.25in），通过JavaScript在打印前检测元素位置，给第一页的.magic-box添加专属类：

CSS新增： #

.first-page-magic-box {
  background: blue !important;
}

添加JavaScript： #

window.addEventListener('beforeprint', () => {
  const magicBoxes = document.querySelectorAll('.magic-box');
  // 0.25英寸换算为像素（默认96dpi）：96*0.25=24px
  const pageMarginThreshold = 24;
  
  magicBoxes.forEach(box => {
    const rect = box.getBoundingClientRect();
    // 第一页元素的顶部距离视口顶部小于边距阈值
    if (rect.top < pageMarginThreshold) {
      box.classList.add('first-page-magic-box');
    } else {
      box.classList.remove('first-page-magic-box');
    }
  });
});

3. 简易固定结构方案 #

如果第一个.magic-box必然在第一页，后续元素不会出现在第一页，可以直接用:first-of-type选择器：

.magic-box:first-of-type {
  background: blue;
}

但这个方案仅适用于固定内容结构，无法覆盖动态分页导致后续.magic-box跑到第一页的场景。

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