CSS计数器功能_counter-reset与counter-increment

counter-reset 必须设在要开始新序列的容器上（如 .chapter { counter-reset: chapter; }），而非全局；它仅对直接子元素生效，需配合 counter-increment 和 content 中的 counter()/counters() 才可见编号。

counter-reset 怎么设才生效

它只对当前元素的直接子元素起作用，不是全局变量。很多人以为在 body 上设一次就能全页面计数，结果发现 h2 没重置、li 还接着上一个数——问题就出在这儿。

• 必须写在要「开始新序列」的容器上，比如 .section { counter-reset: section; }
• 如果想让每个 .chapter 都从 1 开始编号，就得给每个 .chapter 单独加 counter-reset: chapter;
• 支持多个计数器同时重置：counter-reset: item 0 section 1;，数字是起始值（默认为 0）
• 注意层级：父元素设了 counter-reset，子元素用 counter-increment 才能继承上下文，否则会报“未定义计数器”

counter-increment 触发时机和常见失效原因

它只在元素被渲染时触发一次，且仅作用于匹配的元素本身，不递归子元素。最常踩的坑是：写了但没显示，或者编号跳变、重复。

• 必须配合 content 和 counter() 或 counters() 才能看见效果，光写 counter-increment 不会自动出数字
• 伪元素里用错位置：比如写在 ::before 但忘了加 content，或者把 counter-increment 写在 ::after 里（无效）
• 动态插入元素（如 JS append）后，不会自动补计数；需要手动触发重绘或确保样式已挂载
• display: none 的元素仍会触发 counter-increment，但 visibility: hidden 不会

counters() 嵌套计数时的分隔符陷阱

用 counters() 实现「1.1」「2.3.2」这类嵌套编号时，分隔符看似简单，实则容易漏掉关键细节。

零沫AI工具导航

零沫AI工具导航-AI导航新标杆,探索全球实用AI工具

下载

• 第二个参数必须是字符串字面量，比如 counters(section, ".")，不能是变量或 CSS 变量（不支持）
• 如果父级没设 counter-reset，子级用 counters() 会静默失败，显示空内容
• 层级断开时（比如中间某层没设 counter-increment），编号会塌缩成单层，例如期望「2.1.1」却变成「2.1」
• 分隔符前后空格会被当作文本渲染，导致「1 . 1」这种难看格式，建议写成 "." 而非 ". "

兼容性和性能要注意什么

这个功能在所有现代浏览器都稳定，但 IE11 是最后一道坎；性能方面，深层嵌套 + 大量元素可能拖慢渲染，尤其在旧版 Safari。

立即学习“前端免费学习笔记（深入）”；

• IE10+ 支持 counter-reset 和 counter-increment，但 IE11 及以下不支持 counters() 的第三个参数（样式）
• 不要在 :hover 或动画中频繁切换 counter-increment，可能引发重排抖动
• 服务端渲染（SSR）时，CSS 计数器完全不执行，服务端看不到编号；需前端 hydrate 后才生效
• 可访问性差：屏幕阅读器通常忽略 content 生成的内容，编号无法被读出，重要结构建议用真实文本或 ARIA 补充