Verwenden von CSS-Zählern

Question

Wie kann ich ein Element zählen, wenn jedes Element in einem separaten Element verschachtelt ist?

.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

Sie müssen auch 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>

Bearbeiten: Sie Eltern Element und counter-reset auf sie verwenden schaffen, so dass nun für jeden 012.Element Sie erstellen neue Instanz des Zählers Fiddle anstelle des Zähler auf Körper Fiddle

zurücksetzen