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. ITEM1

1.1.ITEM2

2. ITEM1

2.1.ITEM2

2.2.项目3

有没有什么方法可以在列表的开头增加一个级别的排序？第二个<ol>开始于2:2.1.ITEM1

1.1.ITEM1

1.1.1.ITEM2

1.2.ITEM1

1.2.1.ITEM2

1.2.2.项目3

-------同一父母的第二名---------

2.1.ITEM1

2.1.1.ITEM2

2.2.ITEM1

2.2.1.ITEM2

2.2.2.项目3

笔在这里:http://codepen.io/simPod/pen/wawOLd

Answer 1

您可以设置一个额外的计数器并仅在外部列表上更新它（可以通过选择body > ol）

更新了 Codepen

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

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