list-style-type仅对<ol>有效，常见值有decimal、lower-roman、upper-alpha和none；自定义序号需用counter-reset、counter-increment和::before；缩进应调padding-left而非text-indent；移动端序号截断需检查overflow和父容器min-width。
用 list-style-type 控制序号类型，但注意它只对 <ol> 有效
序号样式本质是有序列表 <ol> 的渲染行为，<ul> 没有序号，所以改 list-style-type 对无序列表无效。常见取值有：decimal（1, 2, 3）、lower-roman（i, ii, iii）、upper-alpha（A, B, C），还有 none（彻底隐藏序号）。
直接写在 CSS 里最稳妥，比如：
ol {
list-style-type: upper-alpha;
}
不建议用 type 属性内联设置（如 <ol type="A">），因为语义弱、兼容性差，且无法覆盖 CSS 中的声明。
自定义序号要用 counter-reset + counter-increment + ::before
当需要「第1章」「Item-001」或跳过某些项时，CSS 计数器是唯一可靠方式。核心逻辑是：重置计数器 → 每个 <li> 自增 → 用伪元素插入内容。
立即学习“前端免费学习笔记（深入）”；
示例：生成「Step-01」「Step-02」格式：
ol.steps {
counter-reset: step;
}
ol.steps li {
counter-increment: step;
}
ol.steps li::before {
content: "Step-" counter(step, decimal-leading-zero) " ";
}
关键点：
-
counter(step, decimal-leading-zero)中的decimal-leading-zero是格式关键词，不是任意字符串 - 必须给
<ol>设counter-reset，否则counter-increment无效 -
::before插入的内容默认是行内，若需对齐，常配合display: inline-block或flex
序号和文字之间间距不一致？优先调 padding-left 而非 text-indent
浏览器对 <ol> 的默认缩进由 margin-left 和 padding-left 共同决定，不同引擎表现不一。用 text-indent 只缩进第一行，反而让多行文本错位。
推荐做法：
- 先重置默认边距：
ol { margin-left: 0; padding-left: 2rem; } - 用
padding-left控制序号与文字的横向距离，数值越大，文字越靠右 - 如果序号本身要右对齐（比如罗马数字长度不一），得用
counter()+flex布局手动控制位置
移动端上序号被截断？检查 overflow 和父容器 min-width
小屏幕下，长序号（如 lower-greek 的 ς, τ, υ）或自定义前缀容易撑破容器，导致序号显示不全甚至消失。这不是样式没生效，而是被裁剪了。
排查顺序：
- 给
ol加overflow: visible（默认可能是hidden） - 确认父容器（比如
<section>或<div>）没有设死width或min-width - 避免在
li::before里用固定宽高，改用fit-content或弹性布局
真正麻烦的是嵌套列表——子 <ol> 的序号层级叠加后，缩进和换行逻辑会变复杂，这时候宁可拆成多个独立 <ol>，也别强依赖 CSS 自动嵌套。
