计数器不增加 CSS

Question

在这个例子中：

h3 {
  font-size: .9em;
  counter-reset: section;
}
h4 {
  font-size: .7em;
  counter-reset: subsection;
}
h3:before {
  counter-increment: section;
  content: counter(section)" ";
}
h4:before {
  counter-increment: subsection 2;
  content: counter(section)"." counter(subsection)" ";
}

<h3>Favorite Movies</h3>
<h4>District 9</h4>
<h4>The Matrix</h4>
<h4>The Cabin in the Woods</h4>

<h3>Others</h3>
<h4>Minority Report</h4>
<h4>Lord of the Rings</h4>
<h4>Fargo</h4>

我看到 section 和 subsection 没有递增。

这段代码有什么问题？

Answer 1

计数器未正确递增，因为您正在自行重置它们 parent。

例如，每次浏览器遇到 h3 标签时，计数器 section 都会被重置（即值设置为 0），因此当 counter-increment在 h3:before（h3 的 children）内被调用，它每次都从 0 增加到 1。

您应该在大 parent 级别重置计数器（如果没有大 parent，则在 body 级别）。

body {
  counter-reset: section;
}
h3 {
  font-size: .9em;
  counter-reset: subsection;
}
h4 {
  font-size: .7em;
}
h3:before {
  counter-increment: section;
  content: counter(section)" ";
}
h4:before {
  counter-increment: subsection 2;
  content: counter(section)"." counter(subsection)" ";
}

<!-- at body reset section to 0 -->

<h3>
  <!-- the h3 will inherit counter section from body (its parent) and increment to 1 in :before -->
  <!-- every time a h3 is encountered, the subsection is reset to 0 -->
  Favorite Movies
</h3>
<h4>
  <!-- this inherits subsection counter from previous sibling and increments value to 2 in :before -->
  District 9
</h4>
<h4>
  <!-- this inherits subsection counter and its value from previous sibling and increments value to 4 in :before -->
  The Matrix
</h4>
<h4>
  <!-- this inherits subsection counter and its value from previous sibling and increments value to 6 in :before -->
  The Cabin in the Woods
</h4>

<h3>
  <!-- the h3 will inherit counter section from body (its parent), its value from the previous sibling and increment to 2 in :before -->
  <!-- here the subsection counter is again reset to 0 because the subsection numbering has to restart -->
  Others
</h3>
<h4>
  <!-- this inherits subsection counter from previous sibling and increments value to 2 in :before -->
  Minority Report
</h4>
<h4>
  <!-- this inherits subsection counter and its value from previous sibling and increments value to 4 in :before -->  
  Lord of the Rings
</h4>
<h4>
  <!-- this inherits subsection counter and its value from previous sibling and increments value to 6 in :before -->  
  Fargo
</h4>

计数器不增加 CSS

Counter does not increment in CSS

css

css-counter