css - 计数器不会在 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

计数器没有正确递增，因为您要在它们自己的父级中重置它们。

例如，每次浏览器遇到 h3 标记时，计数器 section 都会被重置(即值设置为 0)，因此当 counter-increment 在 h3:before(h3 的子级)中被调用，它只是每次从 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>