ol默认不支持括号数字，必须禁用list-style并用counter-reset、counter-increment和::before手动注入content: "(" counter(item) ") "，同时重置padding-left、控制line-height与vertical-align以确保对齐，且需显式指定decimal参数防止中文前缀下格式异常。
ol 默认不支持括号数字，必须关掉默认样式再用 CSS counter 补上
浏览器对 ol 的原生编号只输出 “1.”、“2.” 这类带点后缀的格式，list-style-type 无法生成括号包裹的数字（如“(1)”）。想实现这个效果，得先禁用默认编号，再用 counter-reset + counter-increment + ::before 手动注入内容。
常见错误是只写 ol { list-style: none; } 却忘了补编号逻辑，结果列表完全没序号——这是最常踩的坑。
-
ol上必须设counter-reset: item;（名字可自定义，但要和后面一致） -
li上必须设counter-increment: item;，否则counter(item)始终为 0 -
::before里用content: "(" counter(item) ") "，注意括号是字符串字面量，不是 CSS 函数
括号数字要对齐文本，padding-left 和 line-height 得一起调
直接加 ::before 后，括号数字常会和文字基线错位，尤其在用了非默认字体或行高时。这不是编号逻辑问题，而是排版细节没控住。
关键不是“怎么加括号”，而是“怎么让括号和文字视觉对齐”。不同浏览器默认缩进差异大（Chrome 给 ol 的 padding-left 是 40px，Firefox 是 2.5em），不统一就会左右浮动。
- 先重置
ol { padding-left: 0; margin: 0; } - 给
li::before设固定宽度或display: inline-block+width，避免括号挤占文字空间 - 若文字行高大，需同步调
li::before { line-height: 1.2; vertical-align: middle; }，否则括号飘在顶部
需要“第1步”“第2步”这类中文前缀？decimal 参数不能省
如果目标是 “(第1步)” 而不是纯数字括号，counter() 的第二个参数必须显式写 decimal。否则某些浏览器（尤其旧版 Safari 或启用了 locale 的环境）可能把 counter(step) 解析成罗马数字或字母，导致显示成 “(i)” 或 “(a)”。
示例写法：content: "(第" counter(item, decimal) "步)";
-
decimal是默认值，但加了中文前缀后就不再是纯数字上下文，必须显式声明 - 不要写
counter(item, "decimal")—— 引号是错的，正确是counter(item, decimal) - 如果要补零（如“(01)”），用
counter(item, decimal-leading-zero)，注意连字符是必需的
动态增删 li 时，括号序号能自动更新吗？能，但别依赖 value 属性
用 CSS counter 实现的括号序号，天然支持 DOM 动态变化：插入新 li 就自动 +1，删掉某项就自动重排，不需要 JS 干预。但千万别混用 HTML 的 value 属性——它只影响原生 ol 编号，对 CSS counter 完全无效，反而会造成语义混乱和调试困难。
- 删除一个
li后，剩余项的counter(item)会实时重算，括号内数字连续 - JS 插入新
li时，只要它在ol内且符合结构（直接子元素），序号立刻生效 - 避免写
<li value="5">...</li>—— 这个属性只对浏览器原生计数起作用，CSS counter 视而不见
content，却没设 margin-right 或 white-space: pre，导致括号紧贴文字、换行时错位。这个细节在移动端尤其明显。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
