5

在这个例子中：

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没有增加。

这段代码有什么问题？

4

1 回答 1

11

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

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

您应该在祖父级别（或者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>

于 2015-11-28T14:31:09.690 回答