把有序列表换成带括号的样子

功能介绍

浏览器默认有序列表 ol 编号样式为 1、2、3...，本案例利用 CSS 计数器（counter） 技术，自定义实现(1)(2)(3) 带括号编号样式，可自由修改编号格式、样式，是前端自定义列表序号的核心方法。

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>把有序列表换成带括号的样子</title><style>.custom-list {list-style: none; /* 移除默认的列表样式 */counter-reset: my-counter; /* 初始化计数器 */
}.custom-list li {counter-increment: my-counter; /* 每次出现li时增加计数器 */
}.custom-list li:before {content: "(" counter(my-counter) ")"; /* 设置内容为计数器，并加上括号 */margin-right: 5px; /* 可选：在编号和文本之间添加一些空间 */
}</style></head><body><ol class="custom-list"><li>了解表单元素的定义。</li><li>了解表单元素的定义。</li><li>了解表单元素的定义。</li></ol></body>
</html>

核心

CSS 计数器是浏览器自带的自动计数机制，分为三步：初始化计数器 → 自动累加计数 → 伪元素展示计数内容，彻底摆脱浏览器默认列表样式限制，实现自定义序号。

代码解析

外层列表样式（.custom-list）

list-style: none：清除 ol 默认自带的 1、2、3 序号，为自定义编号做铺垫。

counter-reset: my-counter：初始化计数器** my-counter 为自定义计数器名称（可随意取名），默认初始值为 0。 作用域：只对当前盒子内部的子元素生效。

列表项样式（.custom-list li）

counter-increment: my-counter：计数器自增** 每匹配到一个 li，计数器数值 +1。 第一个 li 变为1、第二个2、第三个3，实现自动排序。

伪元素生成序号（:before）

before：行内伪元素，在每个 li 文字最前方插入内容。

content: "(" counter(my-counter) ")"**：核心代码 拼接括号 + 计数器数值，最终生成 (1) (2) (3) 格式。

margin-right: 5px：让序号和文字之间产生间距，避免紧贴，提升美观度。

执行流程

  1. 给 ol 初始化计数器，初始值为 0；
  2. 遍历每一个 li，计数器自动+1；
  3. 通过 before 伪元素，在文字前展示带括号的计数器数值；
  4. 清除默认序号，完成自定义带括号有序列表。