html - 是否有一种纯 CSS 方式可以在 2 个单独的有序列表中继续有序列表编号？

Question

演示:https://jsfiddle.net/jacobgoh101/uqrkaodc/3/

<ol>
  <li>a</li>
</ol>
<ul>
  <li>b</li>
</ul>
<ol>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ol>

ol li {
  counter-increment: list-0;
  list-style: none;
}

ol li:before {
  content: counter(list-0, decimal) '. ';
}

当前结果

1 a
• b
1 c
2 d
3 e

有没有办法在下面实现这个结果？

预期结果

1 a
• b
2 c
3 d
4 e

(上下文:尝试使嵌套列表与 QuillJS 一起工作。 https://github.com/quilljs/quill/issues/979)

更新:

由于QuillJS库的限制，我真的无法添加 start="2"到 ol或更改 HTML 结构。

如果可能的话，我想我需要一个纯 CSS 解决方案。

Answer 1

ol {
  list-style-type: none;
  /* Remove default numbering */
}

ol > li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

ol:first-of-type {
  counter-reset: mycounter;
}

<ol>
  <li>a</li>
</ol>
<ul>
  <li>b</li>
</ul>
<ol>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ol>