html - CSSリストカウンター増加レベル

Question

HTML

<ol>
  <li>item1
    <ol>
      <li>item2</li>
    </ol>
  </li>
  <li>item1
    <ol>
      <li>item2</li>
      <li>item3</li>
    </ol>
  </li>
</ol>

SCSS

ol {
  counter-reset: item;
  li {
    display: block
  }
  li:before {
    content: counters(item, ".") ". ";
    counter-increment: item
  }
}

現在、リストは次のように並べられています。

1. アイテム1

1.1。アイテム2

2. アイテム1

2.1. アイテム2

2.2. アイテム3

リストの先頭で順序を 1 レベルずつ増やす方法はありますか? 2 番目は: 2.1<ol>で始まります。アイテム12

1.1。アイテム1

1.1.1. アイテム2

1.2. アイテム1

1.2.1. アイテム2

1.2.2. アイテム3

-------同じ親の次女---------

2.1. アイテム1

2.1.1. アイテム2

2.2. アイテム1

2.2.1. アイテム2

2.2.2. アイテム3

ペンはこちら: http://codepen.io/simPod/pen/wawOLd