Question

我需要在一个HTML文档产生的PDF上有一个以上的页面计数器。

我的文档有100页，因此我需要一个从1到100的计数器。文档中还有一些小节，它们需要自己的页数，例如1-10。想象一下一本书，其中所有页面都编号，并且每个章节都有自己的页码。这有可能吗？

我正在使用CSS打印介质，可以进行1到100的计数，但是在尝试使第二个计数器工作时感到困惑。

Answer 1

<style>
  ul.not-working{
    counter-reset: volume;
    counter-reset: chapter;
  }

  ul li.volume:before{
    counter-increment: volume;
    content: "Volume " counter(volume) ": ";
  }
  ul li.chapter:before{
    counter-increment: chapter;
    content: "Volume " counter(chapter) ": ";
  }
</style>
<style>
  ul.working{
    counter-reset: volume chapter; /* all counters in same attributes */
  }

  ul li.volume:before{
    counter-increment: volume;
    content: "Volume " counter(volume) ": ";
  }
  ul li.chapter:before{
    counter-increment: chapter;
    content: "Volume " counter(chapter) ": ";
  }
</style>

<ul class="not-working">
  <li class='volume'>
    First Volume Name
    <ul>
      <li class='chapter'>First Chapter Name</li>
      <li class='chapter'>Second Chapter Name</li>
    </ul>
  </li>
  <li class='volume'>
    Second Volume Name
    <ul>
      <li class='chapter'>Third Chapter Name</li>
      <li class='chapter'>Fourth Chapter Name</li>
    </ul>
  </li>
</ul>
<ul class="working">
  <li class="volume">
    First Volume Name
    <ul>
      <li class="chapter">First Chapter Name</li>
      <li class="chapter">Second Chapter Name</li>
    </ul>
  </li>
  <li class="volume">
    Second Volume Name
    <ul>
      <li class="chapter">Third Chapter Name</li>
      <li class="chapter">Fourth Chapter Name</li>
    </ul>
  </li>
</ul>

来源：http://rharriso.github.io/2015/11/25/multiple-css-counters.html

多个CSS页面计数器

1 个答案: