为什么CSS中的counter计数器常用于自动编号_通过counter-reset属性实现-css教程-PHP中文网

counter-reset 必须写在父容器上，counter-increment 与 content 必须成对使用；起始编号为1时 counter-reset 应设为0（即省略数值）；嵌套编号需用 counters() 并逐层重置计数器；计数器名区分大小写且不可含空格或点号。

为什么css中的counter计数器常用于自动编号_通过counter-reset属性实现

counter-reset 必须写在父容器上，不能写在要编号的元素自身

常见错误是把 counter-reset: item; 直接加在 .card 或 li 上，结果每个元素都重置一次，编号永远是 1。它本质是“划定计数作用域”，就像 JS 里 let i = 0 要写在循环外一样。正确做法是：给包裹所有目标子项的父元素设 counter-reset，比如 .list-container { counter-reset: item; }。

counter-increment 和 content 必须成对出现，缺一不可

只写 counter-increment: item; 不会显示任何数字；只写 content: counter(item); 但没触发递增，会显示 0 或 NaN（取决于浏览器）。实际生效链是：父元素重置 → 子元素递增 → 伪元素用 content 输出。典型组合：

.list-container { counter-reset: item; }
.list-item { counter-increment: item; }
.list-item::before { content: counter(item) ". "; }

从 1 开始编号时，counter-reset 的初始值别设成 1

很多人误以为 counter-reset: item 1; 就能打出 “1.”，结果第一个显示的是 “2.”。因为 counter-reset 设的是“起始值”，而 counter-increment 每次执行是“先用当前值，再加 1”。所以想显示 1，得让起始值为 0 —— 即 counter-reset: item;（等价于 item 0）。若真要从 5 开始，才写 counter-reset: item 4;。

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

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

下载

嵌套编号必须用 counters()，且子级需重置自己的计数器

比如实现 “1.1”“1.2”“2.1”，不能只靠一个 counter()。关键点：

外层容器设 counter-reset: chapter;，外层项同时做 counter-increment: chapter; 和 counter-reset: section;
内层容器设 counter-reset: section;（继承自父级重置，但显式写更安全）
内层项只做 counter-increment: section;
内层 ::before 用 content: counters(chapter, ".") "." counter(section);