Счетчик приращений с упаковкой div
Я хочу использовать счетчик приращений в упорядоченных списках. Я хочу каждый ol
продолжить на предыдущем счету.
Это работает, когда у меня нет отдельных оберток вокруг ol
s. Обратите внимание, что это работает для второго ol
который находится в том же div, но перестает работать в течение следующих двух ol
s, у которого есть отдельный 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
? Мне нужны упаковочные дивы
1 ответ
Из спецификации
Область действия счетчика начинается с первого элемента в документе, который имеет "возврат счетчика" для этого счетчика, и включает потомков элемента и его следующих братьев и сестер с их потомками.
Итак, вам нужно позвонить counter-reset
на элемент обертки ваших списков, или первый <div class="wrapper">
,
Вот обновление, которое инициализирует mycounter
на body
В качестве примера.
А также из спецификации
Если "counter-increment" или "content" в элементе или псевдоэлементе относится к счетчику, который не входит в область действия "counter-reset", реализации должны вести себя так, как если бы "counter-reset" сбросил счетчик до 0 на этом элементе или псевдоэлементе.
поэтому пункт списка во втором div
фактически инициализировал счетчик для каждого из элементов.