不同的 CSS 属性值取决于 @page 选择器答案

【问题标题】：Different CSS property values depending on @page selector不同的 CSS 属性值取决于 @page 选择器
【发布时间】：2022-01-01 22:33:42
【问题描述】：

我需要在所有 :first 和 :right 页面的右侧显示一个“标签”。选项卡在所有页面上的位置必须相同。

这是我的模拟 HTML：

<?xml version="1.0" encoding="UTF-8"?>
<html>
    <head/>
    <tab class="tab1">RG</tab>
    <body>
        <section>
            <p>All my content</p>.
        </section>
    </body>
</html>

不幸的是，:first 和 :right 页面的边距不同，因此下面的 CSS 会导致选项卡根据页面位于不同的位置：

@page :first {
  size: A4;
  margin-top: 72mm;
  @right-top {
    content: element(rightTab);
  }    
}
@page :right{
  size: A4;  
  margin-top: 32mm;  
  @right-top {
    content: element(rightTab);
  }
}
tab{
    position:running(rightTab);
}
.tab1{
    margin-top:50mm;
}

是否可以根据页面选择器为 margin-top 设置不同的值？例如：首页为 50 毫米，右页为 90 毫米？

【问题讨论】：

标签： html css css-selectors css-paged-media antenna-house

【解决方案1】：

没有接受者？这是我的看法。不，不能根据页面选择器更改属性的值。或者至少，我在规范中没有找到任何关于它的内容。

不可能在类级别做到这一点，但当然可以根据选择器更改页面的属性。

因此，我更改了页边距，以便选项卡现在显示在两个页面上的相同位置。相关区域（@page:first 的@right-top）上的属性 margin-top 现在设置为 -40mm，因此对于 @page:first，该区域中的有效边距相同（72 - 40 = 32mm）和@page：对。

@page :first {
  size: A4;
  margin-top: 72mm;
  @right-top {
  margin-top:-40mm;
    content: element(rightTab);
  }    
}
@page :right{
  size: A4;  
  margin-top: 32mm;  
  @right-top {
    content: element(rightTab);
  }
}
tab{
    position:running(rightTab);
}
.tab1{
    margin-top:50mm;
}

好吧，如果我再考虑几分钟，我可以不发帖就想通了。

【讨论】：

另一方面，现在发布它意味着将来碰巧遇到同样问题的人会找到您的帖子