我需要在所有 :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 毫米？
最佳答案
没有人接受吗？这是我的看法。 不，无法根据页面选择器更改属性值。或者至少，我在规范中没有找到任何相关内容。
不可能在类级别执行此操作，但当然可以根据选择器更改页面的属性。
因此，我更改了页边距，以便该选项卡现在显示在两个页面上的同一位置。相关区域(@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;
}
好吧，如果我再多思考几分钟，我就可以在不发帖的情况下弄清楚它。
关于html - 不同的CSS属性值取决于@page选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70080787/