本文详解如何使用 CSS counter() 和 counters() 函数，配合精准的嵌套选择器，为四级有序列表分别应用数字、小数点编号、带括号的小写字母和小写罗马数字（如 1 → 1.1 → (a) → (i)），无需修改 HTML 结构。
本文详解如何使用 css `counter()` 和 `counters()` 函数，配合精准的嵌套选择器，为四级有序列表分别应用数字、小数点编号、带括号的小写字母和小写罗马数字（如 1 → 1.1 → (a) → (i)），无需修改 html 结构。
在专业文档（如法律协议、技术规范或标准条款）中，常需呈现结构严谨、样式分层的编号体系：一级用阿拉伯数字（1.），二级延续为带小数点的层级编号（1.1），三级转为字母序（(a)），四级则用罗马数字（(i)）。纯靠 HTML 的 <ol type="a"></ol> 或 <ol type="i"></ol> 难以实现自动继承与嵌套对齐，且易破坏语义结构。CSS 计数器（counter-reset / counter-increment）配合 counter() 与 counters() 函数，是实现该效果的现代、语义化且可维护的方案。
核心思路是：全局复位一个计数器 item，各级 <li> 独立递增；通过 counters() 生成前缀路径（如 "1.1"），再对特定嵌套深度使用 counter() 指定显示格式并添加括号。
以下是完整、可直接运行的 CSS 解决方案：
body {
font-family: "Segoe UI", Sans-Serif;
font-size: 85%;
}
ol {
list-style-type: none;
counter-reset: item; /* 初始化全局计数器 */
margin: 0;
padding: 0;
}
li {
display: table;
counter-increment: item; /* 每个 <li> 增加计数器 */
margin-bottom: 0.6em;
}
/* 一级：1. */
li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
width: 20px;
}
/* 二级：1.1 （不加额外标点，保持连续性）*/
li li:before {
content: counters(item, ".") " ";
display: table-cell;
padding-right: 0.6em;
width: 20px;
}
/* 三级：(a) —— 精确匹配 ol > li > ol > li > ol 下的 li */
ol > li > ol > li > ol li:before {
content: counter(item, lower-latin) ") ";
display: table-cell;
padding-right: 0.6em;
width: 24px;
}
/* 四级：(i) —— 精确匹配 ol > li > ol > li > ol > li > ol 下的 li */
ol > li > ol > li > ol > li > ol li:before {
content: counter(item, lower-roman) ") ";
display: table-cell;
padding-right: 0.6em;
width: 24px;
}✅ 关键说明：
立即学习“前端免费学习笔记（深入）”；
-
counters(item, ".")用于生成带分隔符的层级路径（如1.1.1），适用于第 1–2 级； -
counter(item, lower-latin)强制当前层级仅显示单个字母（a,b,c…），配合") "实现(a)效果； -
counter(item, lower-roman)同理生成(i),(ii),(iii)等； - 选择器
ol > li > ol > li > ol li利用了子代（>) 与后代（空格）组合，确保仅作用于第三级<ol></ol>内的<li>，避免误命中深层嵌套中的同级元素； - 所有
<li>仍共享同一计数器item，CSS 自动按 DOM 层级独立管理各层计数值，无需额外声明多个 counter。
⚠️ 注意事项：
- 不要混用 HTML
type属性（如<ol type="a"></ol>）与本方案——它会干扰 CSS 计数器逻辑； - 若需支持 IE（已不推荐），
lower-latin/lower-roman在旧版 IE 中兼容性有限，建议降级为lower-alpha并配合伪元素模拟括号； - 字母/罗马数字默认从
a/i开始；若需自定义起始值（如从c或v开始），可在对应<ol></ol>上添加counter-reset: item 2（2表示a=0, b=1, c=2）； - 推荐为
.before伪元素设置display: table-cell+width，确保编号列对齐，提升可读性。
此方案完全基于标准 CSS，零 JS 依赖，语义清晰、可扩展性强——未来如需新增第五级（如 (1)），只需追加一条选择器与 counter(item, decimal) ")" 即可。
