如何基于@page选择器设置不同CSS值 固定:first/:right页右侧标签位置

完全可以实现标签在不同页面的位置统一，推荐两种可行方案：

方案1：直接调整页边距区域的偏移 #

• 核心思路：不用修改tab元素的原有样式，直接在不同的@page规则的@right-top块中设置内边距，抵消页面顶部边距的差值即可。你的场景里首页顶部边距比普通右页多了40mm（72mm-32mm），只需给普通右页的@right-top加40mm的上内边距即可对齐位置，兼容性最高。

@page :first {
  size: A4;
  margin-top: 72mm;
  @right-top {
    content: element(rightTab);
  }    
}
@page :right{
  size: A4;  
  margin-top: 32mm;  
  @right-top {
    content: element(rightTab);
    padding-top: 40mm; /* 抵消和首页的边距差值，对齐tab位置 */
  }
}
tab{
  position: running(rightTab);
}
.tab1{
  margin-top:50mm;
}

方案2：用CSS变量动态设置tab的上边距 #

• 核心思路：在不同@page规则中定义CSS自定义变量，tab的margin-top直接调用该变量，适合需要动态调整的场景，主流打印渲染引擎（PrinceXML、WeasyPrint、wkhtmltopdf 0.12.6+）均支持该写法。

@page :first {
  size: A4;
  margin-top: 72mm;
  --tab-margin-top: 50mm; /* 首页的tab上边距 */
  @right-top {
    content: element(rightTab);
  }    
}
@page :right{
  size: A4;  
  margin-top: 32mm;
  --tab-margin-top: 90mm; /* 右页的tab上边距，补上40mm的边距差 */
  @right-top {
    content: element(rightTab);
  }
}
tab{
  position: running(rightTab);
  margin-top: var(--tab-margin-top);
}

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