如何正确设置有序递进列表的非编号标题？

嘿，我来帮你搞定这个有序列表加非编号标题的问题，顺便修复那个烦人的HTML错误～

首先，咱们得先搞清楚为什么原来的代码会报错：HTML规范里明确规定<ol>（有序列表）的直接子元素只能是<li>标签，你之前把<strong>A</strong>直接塞到<ol>里面，这肯定不符合规则，所以浏览器才会给你提示错误。

接下来给你两种靠谱的实现方式，既能满足非编号标题+递进有序列表的需求，又能避免HTML错误：

方式一：拆分列表+手动指定起始编号（简单直接） #

如果你的列表不需要频繁新增内容，手动设置起始编号就够了。我们把每个标题和对应的子列表拆分开，标题放在<ol>外面，然后用<ol>的start属性来保持编号连续：

<strong>A</strong>
<ol>
  <li>子项1</li>
  <li>子项2</li>
</ol>

<strong>B</strong>
<ol start="3">
  <li>子项1</li>
  <li>子项2</li>
</ol>

<strong>C</strong>
<ol start="5">
  <li>子项1</li>
</ol>

用Markdown混合HTML写的话也很方便：

**A**
1. 子项1
2. 子项2

**B**
<ol start="3">
  <li>子项1</li>
  <li>子项2</li>
</ol>

这种方式的好处是简单，不需要额外写CSS，缺点是如果后面新增子列表，得手动修改start的值。

方式二：用CSS计数器实现自动连续编号（灵活省心） #

如果你的列表经常要新增内容，手动改编号太麻烦，那CSS计数器就是最佳选择。它能自动帮你维护连续的编号，完全不用手动设置start：

首先写CSS样式：

/* 初始化计数器 */
.list-container {
  counter-reset: item-counter;
}

/* 隐藏默认的列表编号 */
.list-container ol {
  list-style: none;
  padding-left: 0;
}

/* 每次遇到<li>就递增计数器 */
.list-container ol li {
  counter-increment: item-counter;
  margin-left: 1.5em;
  position: relative;
}

/* 显示自定义的连续编号 */
.list-container ol li::before {
  content: counter(item-counter) ". ";
  position: absolute;
  margin-left: -1.5em;
}

然后是HTML结构：

<div class="list-container">
  <strong>A</strong>
  <ol>
    <li>子项1</li>
    <li>子项2</li>
  </ol>

  <strong>B</strong>
  <ol>
    <li>子项1</li>
    <li>子项2</li>
  </ol>

  <strong>C</strong>
  <ol>
    <li>子项1</li>
  </ol>
</div>

这样不管你新增多少个标题和子列表，编号都会自动连续更新，再也不用手动改啦！

最后再强调一遍核心规则：永远不要把<strong>、<div>这类非<li>元素直接放在<ol>或者<ul>里面，一定要遵守HTML的嵌套规范哦～

内容的提问来源于stack exchange，提问作者Juri Rudi