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

Question

我需要在所有 :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 设置不同的值？例如，50mm 在 :first pages 和 90mm 在 :right pages?

Answer 1

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

无法在 class 级别执行此操作，但当然可以根据选择器更改页面的属性。

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

@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;
}

好吧，如果我再考虑几分钟，我就可以在不发布的情况下弄清楚。

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

Different CSS property values depending on @page selector

html

css

css-selectors

css-paged-media

antenna-house

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

Different CSS property values depending on @page selector

html

css

css-selectors

css-paged-media

antenna-house

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