Question

我正在尝试根据新部分的开始时间重置页面计数器。这是HTML

<div id="page">Page </div>
<div class="title">Title</div>
Content
<div class="title">Title</div>
Content
<div class="title">Title</div>
Content

和CSS

.page{
  position:fixed;
  top:0;
  right:0;
}
#page:after{
  counter-increment:page;
  content:counter(page);
}
.title{
  counter-resest:page;
}

如果没有计数器复位，页面会正常编号，但如果我有计数器复位，则第一页会被编号，然后对于其余页面，该编号为空白。

Answer 1

如果可能对您有帮助，请参阅以下计数器。

body {
  counter-reset: section;                   /* Set the section counter to 0 */
}
h3::before {
  counter-increment: section;               /* Increment the section counter*/
  content: "Section" counter(section) ": "; /* Display the counter */
}


ol {
  counter-reset: nested-section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}
li::before {
  counter-increment: nested-section;            /* Increments only this instance
                                            of the section counter */
  content: counters(nested-section,".") " ";    /* Adds the value of all instances
                                            of the section counter separated
                                            by a ".". */
                                         /* if you need to support < IE8 then
                                            make sure there is no space after 
                                            the ',' */
}

<h1>Counters</h1>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

<h1>Nesting counters</h1>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

您可以在此处阅读更多内容：Using CSS counters

如何重置css页面计数器

1 个答案: