Счетчик приращений с упаковкой div

Я хочу использовать счетчик приращений в упорядоченных списках. Я хочу каждый ol продолжить на предыдущем счету.

Это работает, когда у меня нет отдельных оберток вокруг ols. Обратите внимание, что это работает для второго ol который находится в том же div, но перестает работать в течение следующих двух ols, у которого есть отдельный 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 фактически инициализировал счетчик для каждого из элементов.

Другие вопросы по тегам