如何让HTML十进制有序列表（ol.f）从1递增到2？当前仅显示数字1

常见原因：列表结构错误 #

你遇到的问题大概率是把每个列表项单独放在了一个<ol class="f">标签内，而非将多个<li>放在同一个<ol>容器里。浏览器会把每个独立的<ol>视为新列表，因此每个都从数字1开始计数。

错误示例代码 #

<!-- 错误：每个li都套了独立的ol.f -->
<ul>
  <li>
    <ol class="f">
      <li>内容1</li>
    </ol>
  </li>
  <li>
    <ol class="f">
      <li>内容2</li>
    </ol>
  </li>
</ul>

修复后的正确结构 #

将所有需要连续编号的<li>放在同一个<ol class="f">中：

<ul>
  <li>
    <ol class="f">
      <li>内容1</li>
      <li>内容2</li>
    </ol>
  </li>
</ul>

特殊场景：跨容器连续编号 #

如果业务需求必须将列表项分散在不同父元素中（比如每个<li>里都有一个<ol class="f">），可以通过CSS计数器实现连续编号：

CSS代码 #

/* 在父容器初始化计数器 */
ul {
  counter-reset: custom-counter;
}

/* 隐藏默认列表编号 */
ol.f {
  list-style-type: none;
}

/* 为每个li递增计数器 */
ol.f li {
  counter-increment: custom-counter;
}

/* 自定义显示编号 */
ol.f li::before {
  content: counter(custom-counter) ". ";
  margin-right: 8px;
}

对应HTML结构 #

<ul>
  <li>
    <ol class="f">
      <li>跨容器项1</li>
    </ol>
  </li>
  <li>
    <ol class="f">
      <li>跨容器项2</li>
    </ol>
  </li>
</ul>

额外检查点 #

• 确认没有在CSS中给ol.f设置counter-reset属性（这会强制每个列表重置计数）。
• 检查是否有其他CSS规则覆盖了list-style-type: decimal，比如设置了list-style: none。

内容的提问来源于stack exchange，提问作者Aldo 01