CSS計數器：不復位如果OL

Question

外面的包裝我試圖創建一個使用「CSS計數器」以爲例this Mozilla article自定義編號列表（OL）。

我需要稍微修改它，將最後一個OL包裝在名爲.foo的DIV容器中，如jsFiddle所示。

<div id='foo'> 
    <ol> 
     <li>item</li>   <!-- 1  --> 
     <li>item</li>   <!-- 2  --> 
    </ol> 
</div> 

ol { 
    counter-reset: section; 
    list-style-type: none; 
} 
li::before { 
    counter-increment: section; 
    content: counters(section,".") " "; 
} 

添加包裝，計數器不再重置，數字從4.1和4.2繼續。爲什麼？即使包裝在容器中，如何重置新計數器？謝謝

Answer 1

添加計數器復位到div並分配一個新的值到包裝醇。 小提琴：http://jsfiddle.net/mbmg52sz/3/

ol{ 
    counter-reset: sectionA; 
    list-style-type: none; 
} 
li::before { 
    counter-increment: sectionA; 
    content: counters(sectionA,".") " "; 
} 

div{ 
    counter-reset: sectionA; 
} 

div > ol{ 
    counter-reset: sectionB; 
} 

div > ol > li{ 
    counter-increment: sectionB; 
    content: counters(sectionB,".") " "; 
}