CSS-счетчики: не сбрасывается, если есть оболочка за пределами OL

Question

Я попытался создать собственный заказный список (OL) с помощью «CSS-счетчики», взяв в качестве примера this Mozilla article.

Мне нужно немного модифицировать его, обертывая последний OL в контейнере DIV с именем .foo, как показано в этом 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 и присвоить новое значение обернутому ol. Fiddle: 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,".") " "; 
}