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

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

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

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

＆＃13;

＆＃13;

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)" ";
}

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;