<ol>-有序列表

<ol> 是 HTML 中用于创建有序列表的标签，列表项默认以数字序号标记。与无序列表 <ul> 不同，<ol> 的每一项会按照特定顺序排列，适合需要强调顺序的场景。

<ol> 的基本语法

<ol> 必须搭配 <li> 标签使用，每个 <li> 代表一个列表项。基本结构如下：

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

渲染效果：

1. 第一项
2. 第二项
3. 第三项

控制序号类型

通过 type 属性可以改变序号样式：

<ol type="A">
  <li>大写字母</li>
  <li>B</li>
</ol>
<ol type="a">
  <li>小写字母</li>
  <li>b</li>
</ol>
<ol type="I">
  <li>罗马数字</li>
  <li>II</li>
</ol>

效果： A. 大写字母
B. B
a. 小写字母
b. b
I. 罗马数字
II. II

自定义起始序号

使用 start 属性可以从指定数字开始计数：

<ol start="10">
  <li>第十项</li>
  <li>第十一项</li>
</ol>

效果： 10. 第十项
11. 第十一项

反向列表

添加 reversed 属性可实现倒序编号：

<ol reversed>
  <li>第三项</li>
  <li>第二项</li>
  <li>第一项</li>
</ol>

效果： 3. 第三项
2. 第二项

1. 第一项

嵌套列表

<ol> 可以多层嵌套，形成复杂结构：

<ol>
  <li>第一章
    <ol type="a">
      <li>第一节</li>
      <li>第二节</li>
    </ol>
  </li>
  <li>第二章</li>
</ol>

效果：

1. 第一章
   a. 第一节
   b. 第二节
2. 第二章

结合 CSS 自定义样式

通过 CSS 可以完全覆盖默认样式：

<ol class="custom-list">
  <li>自定义样式项</li>
  <li>使用 ::before 伪元素</li>
</ol>
<style>
  .custom-list {
    list-style: none;
    counter-reset: step-counter;
  }
  .custom-list li::before {
    content: "步骤 " counter(step-counter) ": ";
    counter-increment: step-counter;
    color: red;
  }
</style>

效果：
步骤 1: 自定义样式项
步骤 2: 使用 ::before 伪元素

实际应用场景

操作步骤说明

<ol>
  <li>打开设备电源</li>
  <li>进入系统设置</li>
  <li>选择网络配置</li>
</ol>

排行榜展示

<ol start="1">
  <li>张三 - 95分</li>
  <li>李四 - 88分</li>
  <li>王五 - 76分</li>
</ol>

法律条款编号

<ol type="I">
  <li>总则
    <ol type="a">
      <li>定义</li>
      <li>适用范围</li>
    </ol>
  </li>
  <li>权利与义务</li>
</ol>

与 <ul> 的对比

浏览器兼容性注意事项

所有现代浏览器均支持 <ol>，但需注意：

• 某些旧版本 IE 对 reversed 属性支持不完善
• 移动端浏览器可能对自定义计数器渲染存在差异
• 打印时建议检查序号是否正常分页续编

高级用法示例

多级目录结构

<ol>
  <li>第一部分
    <ol type="a">
      <li>第一章
        <ol type="i">
          <li>第一节</li>
          <li>第二节</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

动态生成列表

const data = ["苹果", "香蕉", "橙子"];
const olElement = document.createElement('ol');
data.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  olElement.appendChild(li);
});
document.body.appendChild(olElement);