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>

編集:親要素を作成counter-resetして使用できるため、すべての要素に対して、ボディFiddleのカウンターをリセットする代わりに、カウンターFiddleparentの新しいインスタンスを作成します。