飞碟页数+页数

Question

我正在尝试在我使用Flying Saucer生成的pdf文档上配置一个不错的页脚。 但是我在将页码和页数放在一个不错的位置时遇到了问题。

考虑一下css：

div#page-footer {
    position : running(footer);
    // ..  more styling .. //
}
div.page-number:before {
    content: counter(page);
}

使用这段html不会给我一个页码：

<div id="page-footer">
    <div class="page-number"></div>
</div>

如果我将课程提升一级，我设法获得页码的唯一方法。

<div id="page-footer" class="page-number">
</div>

但这不允许我在页脚中添加其他内容或者使应用样式变得非常困难。我可以为页码添加一个单独的页脚，但要让位置恰到好处是很难的。

是否有办法在包含其他元素和样式的页脚中获取页码+页数？

额外说明：

• 我简化了页脚，原来在那里有更多，但即便是这个简单的例子，它也给出了问题。
• 对元素使用span或div没有什么区别。

Answer 1

您应该使用id代替class来识别包含页码的div。

这将有效：

div#page-number:before {
    content: counter(page);
}

<div id="page-footer">
    <div id="page-number"></div>
</div>