counter-reset 必须作用于父容器以建立计数上下文，h3 上直接设置会导致每次重置而无法连续编号；counter-increment 在目标元素自身设置并支持负值/多增量；counters() 依赖各级 container 的 counter-reset 实现嵌套编号；计数器仅为整数累加，不支持小数、字符串拼接或动态计算。
counter-reset 必须作用在父容器上，否则计数器不生效
很多人写 h3 { counter-reset: title; } 以为每个 h3 都会重置一次，结果发现编号从 1 开始但只递增到 2 就停了。这是因为 counter-reset 的作用是「为后代元素建立计数上下文」，它本身不触发自增，也不影响自身。真正起作用的是它的父级容器（比如 article 或 div）——只有在这个容器里，后续所有匹配 counter-increment 的子元素才能共享并更新同一个计数器。
常见错误写法：
h3 { counter-reset: title; } /* ❌ 每个 h3 都重置，等于没计数 */正确做法：
- 把
counter-reset: title;放在最外层包裹容器上（如main、.doc） - 确保
counter-increment: title;出现在要编号的元素自身选择器里（如h3::before） - 如果页面有多个独立编号区域（如多个
.section），每个都得单独设counter-reset
counter-increment 可以设负值或非 1 增量，但别和 counter-reset 冲突
counter-increment 默认每次 +1，但它支持任意整数，包括 0 和负数。比如做倒序编号：counter-increment: step -1;，配合 counter-reset: step 5; 就能输出 5→4→3…
立即学习“前端免费学习笔记（深入）”；
但要注意：如果某个元素同时被多个规则匹配（比如同时命中 li 和 .important），且都带 counter-increment，浏览器会叠加执行。例如：
.list li { counter-increment: item; }<br>.list li.urgent { counter-increment: item 2; }那么带 .urgent 的 li 实际会 +3（1+2），不是覆盖也不是取最大值。容易误判编号跳变原因。
- 增量值写成
item 0不会阻止自增，只是加 0 —— 仍会触发计数器更新（影响counters()嵌套行为） - 不要在同一个选择器里重复写
counter-increment: a; counter-increment: a 2;，后者会覆盖前者 - 若需条件性跳过编号（如跳过某项不显示序号），用
counter-increment: none;更安全
counter() 和 counters() 的行为差异直接影响嵌套结构显示
counter(title) 只返回当前层级计数器的值；而 counters(title, ".") 会向上遍历所有同名计数器，拼接成 1.2.3 这样的路径式编号。但前提是：上级容器必须也设置了 counter-reset: title;，否则中间断层，counters() 就只返回最后一段。
典型场景是多级标题：
article { counter-reset: section; }<br>h2 { counter-reset: subsection; }<br>h2::before { counter-increment: section; content: counter(section) ". "; }<br>h3::before { counter-increment: subsection; content: counters(section, ".") "." counter(subsection) " "; }这里 h3::before 要显示 2.1，就必须保证 h2 元素上有 counter-reset: subsection;，否则 counters(section, ".") 会漏掉 h2 级的计数器值。
-
counters()第二个参数是分隔符，必须是字符串字面量，如"."或"–"，不能是变量或 CSS 自定义属性 - 如果嵌套层级中某一级没设
counter-reset，该层计数器不会被纳入counters()的路径 -
counter()不受父级counter-reset影响，只看最近一次counter-increment的结果
计数器不支持小数、字符串拼接或运行时计算
CSS 计数器本质是整数累加器，所有操作都在样式计算阶段完成，无法读取 DOM 文本、响应用户交互或参与 calc() 运算。你不能写 counter(item) + "a"，也不能用 calc(counter(item) * 2)。
这意味着：想实现「第 X 项（共 Y 项）」这种带总数的格式，CSS 本身做不到；想让编号随 display: none 切换动态重排，也不行——计数器只按 CSS 选择器匹配顺序递增，不管元素是否渲染。
- 需要总数时，只能靠 JS 注入
data-total属性，再用attr(data-total)拼接 - 隐藏元素仍参与计数：如果
li:hidden { display: none; }，它依然会触发counter-increment - 计数器名称区分大小写，
Counter和counter是两个不同计数器
实际使用中最容易忽略的，是计数器作用域的隐式继承关系——它不靠 DOM 树深度决定，而完全依赖 CSS 选择器的匹配顺序和 counter-reset 所在元素的包含范围。一旦嵌套结构复杂或复用组件，编号错乱往往就出在这里。
