css - 如何设置分页媒体元素的样式

Question

谷歌、@Page文档和这个链接都没有这方面的任何信息。

我有以下代码在我从 html 生成的 pdf 页面右侧的页脚中显示页码：

@page {
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
  }
}

这愉快地打印了Page A of X。我如何设置 A 和 X 的样式？

Answer 1

简短的回答是你不能单独使用 CSS。为了设置样式A并X与文本的其余部分分开，您需要插入要换行的元素A，X例如：

 Page <span class="a">A</span> of <span class="b">B</span>

但是，您不能使用 CSS 标签插入标签content。 因此，为了实现这一点，您应该在 HTML 中创建一个页脚元素（如此处所述），并相应地设置它的样式。例如：

<div class="footer">
    Page <span class="a">A</span> of <span class="b">B</span>
</div>


@media screen {
  div.footer {
    display: none;
  }
}

@media print {
  div.footer {
     position: fixed;
     bottom: 0;
     right: 0;
     padding-right: 30px;
  }

  div.footer a{
     // STYLING FOR A GOES HERE
  }
}