css计数器需手动控制作用域与递增逻辑，因浏览器原生列表不继承父级编号、不支持混合格式拼接；必须用counter-reset定义作用域、counter-increment触发计数，并用counters()自动拼接层级，禁用list-style避免重复编号。
不能靠 <ol></ol> 嵌套自动实现「1.1 → 1.1.1 → A」这类跨层级连续编号，必须用 CSS 计数器手动控制作用域与递增逻辑。浏览器原生列表只重置子级计数器，不继承父级值，也不支持混合格式拼接。
为什么 <ol type="A"></ol> 嵌套后总是从 A 重新开始
因为每个独立的 <ol></ol> 都是全新计数上下文：外层 <ol type="1"></ol> 的 2 项里嵌一个 <ol type="A"></ol>，这个内层 <ol></ol> 仍会从 A 起始——它根本不知道自己在 “2” 下面。这不是 bug，是规范行为。
- 错误写法：
<ol type="1"><li>2</li></ol> <ol type="A"><li>A</li></ol>（两个兄弟<ol></ol>，无嵌套关系） - 正确结构：内层
<ol></ol>必须是外层<li>的直接子元素，否则无法建立计数继承链 - 即便结构合法，
type属性也无法把父级数字和子级字母串成2.A，只能各自独立渲染
counter-reset 和 counter-increment 必须成对出现在正确位置
计数器不会全局存在，它依赖 DOM 作用域。写错位置会导致全为 0、重复 1 或跳号。
MiniMax 媒体生成
下载
一款AI音频处理工具，主要用于MiniMax统一媒体生成技能，用于TokenPlan工作流。当用户要求生成音频、语音、TTS、旁白、图片、插图、姿势等媒体内容时使用，适合需要提升相关任务效率的用户。
-
counter-reset: section;必须设在最外层容器上（如<ol class="toc"></ol>），不能写在<li>或<h2></h2>上 -
counter-increment: section;必须写在要触发编号的元素上（如<li>或<h3></h3>），且该元素需在counter-reset作用域内 - 若想让某项不参与计数，就别给它加
counter-increment；想跳两格，写counter-increment: section 2; - 隐藏元素（
display: none）不触发counter-increment，但visibility: hidden仍会触发——计数基于渲染流，不是可见性
用 counters() 拼接层级编号比手动写多个 counter() 更可靠
counters(section, ".") 会按 DOM 嵌套深度自动提取所有同名计数器并连接，避免手动拼接时因层级缺失导致 1.. 或 1.2. 这类空段问题。
- 统一用一个计数器名（如
section），靠嵌套结构区分层级，比定义section/subsection/subsubsection更简洁且不易出错 -
content: counters(section, ".") ". ";在<li>的::before中即可生成1.1.1格式 - 混合格式（如
1.1.A）需分层管理：一级用decimal，二级用decimal，三级用lower-alpha，并在对应层级的counter()中指定格式 - 必须禁用原生编号：
list-style: none;，否则::before内容和浏览器默认数字会叠加显示
动态插入 DOM 后编号不更新的实际原因
CSS 计数器是纯渲染时计算的静态机制，不监听 DOM 变化。JS 新增的 <li> 若没带 counter-increment 声明，就不会被计入。
- 新增元素必须显式带上对应
counter-increment（如element.style.cssText = "counter-increment: section;"） - 不能只靠 class 继承——如果 class 规则里写了
counter-increment，那新增元素只要匹配该 class 就生效；但若 JS 插入的是无 class 的裸<li>，就完全不会计数 - 服务端渲染或静态 HTML 没这个问题；但 SPA 中频繁增删列表项时，必须确保每次插入都携带完整计数声明
- 真正麻烦的是跨容器计数（如多个
<ol></ol>共享同一编号流），这时得把counter-reset提到更高层容器（如<main></main>），并确保所有目标元素都在其作用域内
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
