用::marker设置字母序号最简方式是ol{list-style-type:lower-alpha}，但仅适用于且不支持自定义起始或跳过字母；需灵活控制时应使用counter()配合counter-reset/increment。
如何用 ::marker 设置字母序号（a、b、c…）
直接用 ::marker 配合 list-style-type: lower-alpha 最省事，但注意它只对 <ol></ol> 有效，且不支持自定义起始字母或跳过字母。如果只是基础需求，写成这样就行：
ol {
list-style-type: lower-alpha;
}
ol li::marker {
font-variant-numeric: tabular-nums; /* 可选：让字母对齐更整齐 */
}别试图给 <ul></ul> 加 ::marker 来模拟字母序号——它默认没计数上下文，不会自动递增。
为什么 counter() + ::marker 比纯 list-style-type 更灵活
当你要从字母 c 开始、跳过某个字母、或混合数字与字母（如 a1、a2、b1…），就得靠 counter()。核心是手动初始化计数器，并用 counter() 函数把它转成字母：
-
counter()本身输出数字，得配合counter-reset和counter-increment控制值 - 把数字转字母要靠 CSS 的
counter()第二个参数：counter(my-counter, lower-alpha) -
::marker里不能写表达式，所以必须提前在li上设好计数器，再在::marker中引用
示例：从 c 开始的字母序号
立即学习“前端免费学习笔记（深入）”；
ol.letter-c {
counter-reset: alpha-counter 2; /* a=0, b=1, c=2 */
}
ol.letter-c li {
counter-increment: alpha-counter;
}
ol.letter-c li::marker {
content: counter(alpha-counter, lower-alpha) ". ";
}
::marker 里用 counter() 的常见报错和限制
实际写的时候容易卡在这几个点：
- 忘记在父元素（如
ol）上用counter-reset初始化，导致counter()返回0或空字符串 - 误在
::marker里写counter-increment—— 它只允许content和少量字体/颜色属性，加了会静默失效 - 用
upper-alpha时字母超 Z 会回绕成 AA、AB…，不是错误，但可能不符合预期 - Safari 16.4 之前不支持
::marker里的counter()，需检查兼容性；可降级为li::before+content方案
什么时候该放弃 ::marker，改用 li::before
如果你需要：
- 序号带背景色、圆角、图标等复杂样式（
::marker不支持background、border、padding） - 序号和文字不同行（比如字母在上、文字在下）
- 服务端渲染时无法保证 HTML 是
<ol><li></ol>结构（比如 CMS 输出的是<div class="item">）<p>那就老实用 <code>li::before：li.custom-alpha::before { content: counter(item, lower-alpha) ". "; counter-increment: item; display: inline-block; width: 1.5em; margin-right: 0.5em; text-align: right; }这个方案自由度高，但要注意：它会让序号脱离原生列表语义，屏幕阅读器可能无法正确识别序号逻辑。
