是否有一种纯 CSS 方法可以在 2 个单独的有序列表中继续对有序列表进行编号？答案

【问题标题】：Is there a pure CSS way to continue ordered list numbering across 2 seperated ordered list?是否有一种纯 CSS 方法可以在 2 个单独的有序列表中继续对有序列表进行编号？
【发布时间】：2020-05-19 09:29:50
【问题描述】：

演示：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 库的限制，我无法在 ol 中添加 start="2" 或更改 HTML 结构。

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

【问题讨论】：

这能回答你的问题吗？ How can I reset a CSS-counter to the start-attribute of the given list
@CBroe 对此表示感谢。抱歉不行。由于 QuillJS 库的限制，我无法将 start="2" 添加到 ol。我有点需要一个纯 CSS 解决方案。
这只是一个所见即所得的编辑器库吗？所以我想你可以让你自己的小脚本 sn-p 运行在 DOM 中的元素上，然后设置具有适当值的属性？
@CBroe 是的.. 那将是我最后的选择。我正在处理的应用程序在客户端非常繁重。可能有 5 到 10 个 QuillJS 实例正在运行，并且内容可能很大。循环遍历元素，计算，添加属性可能太重了..
@CBroe 嘿，也可以。非常感谢。您介意将其作为答案，以便我给您投票吗？

标签： html css css-counter

【解决方案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>

【讨论】：

谢谢。不幸的是，由于 QuillJS 库的限制，我无法像您那样更改 HTML 结构。
使用更新后的 HTML 内容按预期工作 :)
你是个天才！谢谢！ ?这对我来说应该足够了。

【解决方案2】：

如果您可以将这些 OL/UL 包装到一个公共父元素中，那么您可以重置该父元素上的计数器，并仅将其递增为 ol li：

div {
  counter-reset: list-0;
}

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

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

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

【讨论】：

【解决方案3】：

似乎使用<ol start="2'> 会起作用

https://www.w3schools.com/tags/att_ol_start.asp

也就是说，不知道为什么不能将无序列表嵌套在原始有序列表中

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

【讨论】：

谢谢。不幸的是，由于 QuillJS 库的限制，我无法将start="2" 添加到ol。我有点需要一个纯 CSS 解决方案。

【解决方案4】：

对于更多的新浏览器，您可以设置自定义开始计数器 throw CSS counter-set。这是具有 UL 列表集成和嵌套列表自定义开头的嵌套计数器的示例。

https://jsfiddle.net/atorn/fqb8oz6g/

...
ol {
  counter-reset: l;
  &> li {
    counter-increment: l;
    display: -ms-grid;
    display: flow-root;
    position: relative;
  }
  &>li::before { // counters with numbered lists
    content: counters(l, '.') ')';
    position: absolute;
    z-index: 104;
    top: 0;
    left: -0.625em;
    width: 1.7em;
...
    background-color: #e0e5e6;
  }
  ol >li::before { // more wide field for Level 3 indexes
    z-index: 103;
    width: 2.2em;
    margin-left: -0.7em;
    padding-left: 0.4em;
  }
}
.o0>ol {counter-set: l -1}
.o1>ol {counter-set: l 0}
.o2>ol {counter-set: l 1}
.o3>ol {counter-set: l 2}
.o4>ol {counter-set: l 3}
.o5>ol {counter-set: l 4}
.o6>ol {counter-set: l 5}
...

https://caniuse.com/?search=counter-set - CSS 属性：counter-set 显示浏览器支持（Safari 14.x 现在不支持自定义开始的计数器）。

Chrome 中的屏幕截图Ordered lists with CSS property counter-set

【讨论】：