如何在CSS中实现变量自增和计数器联动？-css教程-PHP中文网

counter-reset 必须作用于父容器以建立计数上下文，h3 上直接设置会导致每次重置而无法连续编号；counter-increment 在目标元素自身设置并支持负值/多增量；counters() 依赖各级 container 的 counter-reset 实现嵌套编号；计数器仅为整数累加，不支持小数、字符串拼接或动态计算。

如何在css中实现变量自增和计数器联动？

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() 就只返回最后一段。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

典型场景是多级标题：

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 级的计数器值。