2015-04-25 2 views
1

Я хочу использовать встречный приращение для упорядоченных списков. Я хочу, чтобы каждый ol продолжал предыдущий счет.Counter-increment with wrapping divs

Это работает, когда у меня нет отдельных оберточных разделов вокруг ol. Обратите внимание, что она работает на второй ol, который находится в том же оберточной DIV, но он перестает работать в течение следующих двух ol с которых имеет отдельный оберточной DIV:

http://jsfiddle.net/graphic_dev/Lsn49t16/1/

HTML

<div class="wrapper"> 
    <ol class="split start"> 
     <li>Lorem</li> 
     <li>Ipsum</li> 
     <li>Dolor</li> 
    </ol> 

    <ol class="split"> 
     <li>Sit</li> 
     <li>Amet</li> 
    </ol> 
</div> 

<div class="wrapper"> 
    <!-- It stops working here --> 
    <ol class="split"> 
     <li>Consectetur</li> 
     <li>Adipiscing </li> 
    </ol> 

    <ol class="split"> 
     <li>Elit</li> 
     <li>Sed</li> 
    </ol> 
</div> 

CSS

.start { 
    counter-reset: mycounter; 
} 

.split { 
    list-style-type: none; 
} 

.split li:before { 
    counter-increment: mycounter; 
    content: counter(mycounter, upper-alpha); 
} 

Как я могу продолжить подсчет для каждого ol? Мне нужно оберточной дивы

ответ

4

Из Spec

Область действия счетчика начинается с первого элемента в документе, который имеет «контр-сброс» для этого счетчика, и включает потомков элемента и его следующее братья и сестры с их потомками.

Таким образом, вы должны вызвать counter-reset на оберточной элемент из ваших списков, или первый <div class="wrapper">.

Here's an update которые инициализируют mycounter на body в качестве примера.

А также от спецификации

Если «счетчик-инкремент» или «содержание» на элементе или псевдо-элемент относится к счетчику, который не входит в рамки любого «встречного сброса», реализации должны вести себя так, как будто «counter-reset» сбросил счетчик на 0 на этот элемент или псевдоэлемент.

так что элемент списка во втором div фактически инициализировал счетчик для каждого из предметов.