html - 制作页脚，但在打印文档中的每个页面都与 CSS 不同

Question

我想在文档的每一页上打印不同的页脚(因为我必须显示页码)。

我试过这个 CSS 但是它把每个页脚一个一个放在另一个上面而不是在每个页面上都改变它:

section {
    page-break-before: always;
    margin-top: 30px;
    page-break-inside: avoid;
}
footer {
    bottom:0px;
    height:30;
    right:0%;
    left:0%;
    position:fixed!important;
    position:absolute;
    width=100%;
    top:expression((0-(footer.offsetHeight)+
(document.documentElement.clientHeight?
document.documentElement.clientHeight:
document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop?
document.documentElement.scrollTop:document.body.scrollTop))+'px');
    text-align:center;
    visibility:visible;
}

HTML

{{# each array}}
    <section class="row">
        ...
        <div class="col-xs-12">
           ...
        </div>
        <footer>
            <small>     Page {{math @index '+' 7 }} </small>
        </footer>
    </section>
{{/each}}

所以最终的 html 将是:

   <section class="row">
        ...
        <div class="col-xs-12">
           ...
        </div>
        <footer>
            <small>     Page 8 </small>
        </footer>
    </section>
   <section class="row">
        ...
        <div class="col-xs-12">
           ...
        </div>
        <footer>
            <small>     Page 9 </small>
        </footer>
    </section>
   <section class="row">
        ...
        <div class="col-xs-12">
           ...
        </div>
        <footer>
            <small>     Page 10 </small>
        </footer>
    </section>

如何使用 CSS 实现？我不在乎是否每个浏览器都支持它，但它必须在 Chrome 中工作。

谢谢

Answer 1

如果你可以稍微改变你的 HTML，那么你可以用 HTML 数据属性和 css 来做到这一点

small::after {
  content: attr(data-page);
}

<footer>
  <small data-page="1">This is page number </small>
</footer>