移动端有序列表自定义序号必须用 counter-reset + counter-increment + ::before 实现，因 list-style-type 不支持前缀、跳号、响应式缩进，且在 ios safari 和 android chrome 中渲染不一致，易导致错位、裁切或横向滚动。
移动端有序列表的自定义序号，不能靠 list-style-type 解决——它只支持有限样式，且无法加前缀、跳号或适配响应式缩进。必须用 counter-reset + counter-increment + ::before 手动接管编号逻辑，否则在小屏上容易错位、重叠或截断。
为什么 list-style-type 在移动端不够用
它不支持插入文字（如“步骤 1”）、无法控制序号与文字间距、不能随屏幕宽度动态调整对齐方式。更关键的是：iOS Safari 和 Android Chrome 对 list-style-position: inside 的渲染不一致，常导致多行文本首行缩进异常，序号被裁切或挤到行外。
-
list-style-type: lower-roman等值在窄屏下可能撑宽容器，触发横向滚动 - 原生序号默认使用
padding-left控制缩进，但该值在不同浏览器中基准不同，响应式 media query 难以精准覆盖 - 无法实现“第1章”“附录A-1”这类带语义前缀的格式，
list-style-type只能选预设关键字
counter-reset 必须写在父容器，且命名要避开系统保留字
移动端 DOM 结构常含 wrapper div 或 flex 容器，别直接写在 ol 上就完事——如果外层有 div.list-wrapper，就得把 counter-reset: step; 放在它上面。否则当列表被 JS 动态插入或 Vue/React 组件复用时，计数器作用域会断裂。
- 计数器名禁用
section、paragraph等 HTML5 元素名，部分安卓 WebView 会冲突；推荐用step-num、item-index这类明确带连字符的名称 - 起始值写成
counter-reset: step-num 0;，而非省略——显式声明可避免 iOS 17+ Safari 对未初始化计数器的 0 值处理异常 - 若列表嵌套（比如二级菜单），子级容器必须用独立名称，如
counter-reset: sub-step;，不能复用父级名
用 ::before 实现响应式序号定位，避免文字换行错位
移动端最常见问题是序号和文字粘连、多行时第二行顶到序号下方。核心解法是：给列表项设 position: relative;，再用绝对定位的 ::before 锚定左边缘，而非依赖 margin-left 推动内容。
-
li::before { position: absolute; left: 0; width: 2.2em; text-align: right; }——width设为固定值（非百分比），确保小屏下序号区域不塌缩 - 内容区用
padding-left: 2.8em;（比::before宽度略大），留出安全间隙，防 iPhone X 等刘海屏下序号被遮挡 - 序号后缀统一用
content: counter(step-num) ".";，别拼字符串如"Step " counter(step-num)，CSS 不支持表达式拼接 - 字号小于 14px 时，
counter()输出数字可能模糊，建议加font-variant-numeric: tabular-nums;保证等宽对齐
兼容性兜底：IE 和旧版 WebView 需降级为无序列表
@supports (counter-reset: dummy) 是唯一可靠检测方式。别用 display: flex 或 gap 来判断，那些属性和计数器无关，且部分 Android 6.x WebView 会误报支持。
- 降级样式里，用
list-style: none;清除原生序号，再手动加background-image模拟圆点或数字图标（仅限单色简单场景） - 避免在
@supports块内写counter-increment，某些低端安卓浏览器解析失败会导致整个规则失效 - 若项目必须支持 iOS 12 以下，
counters()嵌套编号会完全不显示，此时只能拆成两层独立counter-reset+ JS 补位
真正麻烦的不是写几行 CSS，而是计数器作用域和伪元素渲染在不同 WebView 中的行为差异——尤其当列表项含 button 或 a 时，伪元素可能被截断或 z-index 错乱。动手前先用真机连 DevTools 抓 layout tree，确认 ::before 是否真实挂载在目标元素上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
