CSS算上所有元素在DOM

Question

不知道如果我要問的權利，但我想對在DOM的所有元素（標籤）純CSS計數與類.required，例如HTML標記

<dl class="last"> 
      <dt><label class="required"><em>*</em>Kleur</label></dt> 
     <dd> 
      <div class="input-box"> 
       <select name="super_attribute[92]" id="attribute92" class="required-entry super-attribute-select" style="position: absolute; top: -9999px;"> 

        <option value="">Kies een optie...</option><option value="220" price="0">Champagne</option><option value="29" price="0">Zwart</option></select> 
       <div class="swatches-container"><img src="http://www.lingerie-donna.nl/media/swatches/champagne.png" alt="Champagne" title="Champagne" class="swatch-img"><img src="http://www.lingerie-donna.nl/media/swatches/zwart.png" alt="Zwart" title="Zwart" class="swatch-img"></div></div> 
     </dd> 
      <dt><label class="required"><em>*</em>Maat</label></dt> 
     <dd class="last"> 
      <div class="input-box"> 
       <select name="super_attribute[140]" id="attribute140" class="required-entry super-attribute-select" disabled="" style="position: absolute; top: -9999px;"> 
        <option>Kies een optie...</option> 
        </select> 
       <div class="swatches-container"></div></div> 
     </dd> 
     </dl> 

我使用的CSS是：

.required{ 
text-transform: lowercase; 
    counter-increment: my-awesome-counter; 
} 

.required:before { 
    text-transform: none; 
    content: "" counter(my-awesome-counter) " Kies uw "; 
} 

，但我看到的是

1 Kies uw Kleur 
1 Kies uw Maat 

應該
1 Kies uw Kleur 2 Kies uw Maat

Answer 1

你缺少counter-reset部分：

body { 
    counter-reset: my-awesome-counter; 
} 
.required { 
    text-transform: lowercase; 
    counter-increment: my-awesome-counter; 
} 
.required:before { 
    text-transform: none; 
    content: counter(my-awesome-counter) " Kies uw "; 
} 

Demo