如何讓CSS計數器與CSS選擇器一起工作？

Question

I'was嘗試使用CSS計數器... 這是我的CSS代碼：

div.primaries div.entries>div.meaning:first-child:before { 
    counter-increment: section; 
    content: counter(section); 
} 

和HTML

<div class="primaries"> 
<div class="headword entries"> 
<div class="meaning terms"> 
<span class="meaning terms text">A collection of items of the ...</span> 
</div> 
<div class="meaning entries"> 
<div class="example terms"> 
<span class="example terms text">an arms <em>cache</em></span> 
</div> 
</div> 
<div class="meaning entries"> 
<div class="example terms"> 
<span class="example terms text">a <em>cache</em> of gold coins</span> 
</div> 
</div> 
</div> 
<div class="headword entries"> 
<div class="meaning terms"> 
<span class="meaning terms text">A hidden or inaccessible ...</span> 
</div> 
</div> 
<div class="headword entries"> 
<div class="meaning terms"> 
<span class="meaning terms text">An auxiliary memory from ...</span> 
</div> 
</div> 
</div> 

我沒有使用任何 「計數器復位」 的一部分。 然而，每個輸出的數字是1. 那麼，它爲什麼總是1？

Answer 1

添加這一點，我認爲它會做你會：

div.primaries 
{ 
    counter-reset: section; 
} 

看到它jsfiddle/Larry/ev758/工作。