Question

google和@Page documentation以及this link都没有任何相关信息。

我有以下代码在我从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>

但是，你cannot insert tags using the CSS content tag.因此，为了实现这一点，你应该在HTML中创建一个页脚元素（as described here），并相应地设置它。例如：

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

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

1 个答案: