Счетчик CSS под конкретным номером

Question

Я хочу использовать счетчик CSS, чтобы список заказов начинался с определенного числа (7). Я успешно запустил его с нужного номера, но проблема в том, что подсписок также начинался с этого номера.

// HTML

  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>
      <p>Fourth item - nested ordered list:</p>
      <ol>
        <li>
            <p>Fourth item - nested ordered list:</p>
            <ol>
        <li>A</li>
        <li>B</li>
        </ol>
    </li>
        <li>Second nested item</li>
      </ol>
    </li>
    <li>Fifth item</li>
  </ol>

// CSS

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

Ожидаемое: Я бы хотел, чтобы список начинался со следующего порядка:
7. Первый предмет
8.
9.
10.
10,1
10.1.1
10.1.2

Фактический результат:
7. Первый предмет
8.
9.
10.
10,7
10,7,7
10.7.8

Answer 1

Вы можете исправить это, просто по-разному определив счетчик для верхнего уровня:

ol { counter-reset: item; list-style: none; }
body > ol { counter-reset: item 6; list-style: none; }

Это сработает для приведенного простого примера, если самый внешний ol является прямым потомком тела.Если это не так, вы можете использовать другой родительский элемент в селекторе или добавить класс к внешнему ol, например

<ol class="outer">

ol { counter-reset: item; list-style: none; }
ol.outer { counter-reset: item 6; list-style: none; }