css - 使用 CSS 计数器

Question

如果每个元素都嵌套在一个单独的元素中，我如何计算一个元素？

    .variant--name::before {
      counter-increment: section;
      content: "Abschnitt " counter(section) ": ";
    }

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

Answer 1

你还需要counter-reset

body {
  counter-reset: section;
}
.variant--name::before {
  counter-increment: section;
  content: "Abschnitt " counter(section)": ";
}

<div class="variant--group">
  <h3 class="variant--name">variant</h3>
</div>
<div class="variant--group">
  <h3 class="variant--name">variant</h3>
</div>
<div class="variant--group">
  <h3 class="variant--name">variant</h3>
</div>

编辑:您可以创建 parent 元素并在其上使用 counter-reset，因此现在为每个 parent 元素创建新的实例柜台Fiddle而不是重置 body 上的计数器 Fiddle