css计数器需显式初始化并避免继承干扰：用counter-reset:item 0;而非item；嵌套时用不同计数器名；编号格式需通过content拼接，如counter(item) "."；确保元素可见且选择器匹配；多级编号依赖父子计数器协同重置与递增。
counter-reset 怎么初始化才不会失效
直接在 ol 或 ul 上写 counter-reset: item; 是常见写法，但容易忽略：如果父容器本身已有同名计数器（比如被其他样式或框架重置过），这个声明可能被覆盖或跳过。更稳妥的做法是把 counter-reset 放在最外层可控容器上，并显式指定起始值。
实际建议：
- 用带起始值的写法，例如
counter-reset: item 0;（而不是默认的item），避免继承干扰 - 不要依赖
ol的原生计数行为——一旦加了counter-reset，它就和 HTML 的start属性无关了 - 若列表嵌套，每个层级用不同计数器名（如
counter-reset: section; counter-reset: subsection;），否则内层会重置外层
如何让数字变成 “1.” “2.” “3.” 这类带点格式
CSS 计数器本身只生成纯数字，counter() 函数输出的是数值内容，要加标点或前缀必须靠 ::before 的 content 拼接。很多人卡在这一步，以为 counter(item) 能自动带格式。
正确写法示例：
li {
counter-increment: item;
}
li::before {
content: counter(item) ".";
margin-right: 8px;
}
注意：counter(item) 后面不能直接跟中文标点（如“、”）或空格，必须用英文引号包裹拼接，例如 content: counter(item) "、"; 才生效。
为什么 counter-increment 写在 li 上却没反应
最常见原因是元素没有生成盒子（比如 display: none 或 visibility: hidden），或者 counter-increment 所在选择器未匹配到真实 DOM 节点（比如写成了 ol li:first-child 但第一个 li 实际被注释掉了）。
排查要点：
- 确保目标元素是可见且参与渲染流的（可用 DevTools 的“Computed”面板查
counter-increment是否计算为有效值） -
counter-increment必须写在每次要累加的元素上，不是只写一次；如果想跳过某项，得单独给它设counter-increment: item 0; - 不要和
list-style-type: none混淆——后者只隐藏原生序号，不影响计数器逻辑
多级列表中如何实现 “1.1” “1.2” “2.1” 这类嵌套编号
需要两个独立计数器配合：外层（section）控制主编号，内层（subsection）在每次进入子 ol 时重置，并在 li 中组合输出。关键在于 counter() 支持第二个参数指定分隔符，但仅限于嵌套计数器链（即父计数器必须已定义并递增）。
典型结构：
ol.section { counter-reset: section; }
ol.subsection { counter-reset: subsection; }
ol.section > li { counter-increment: section; }
ol.subsection > li { counter-increment: subsection; }
ol.section > li::before {
content: counter(section) ".";
}
ol.subsection > li::before {
content: counter(section) "." counter(subsection);
}
这里容易漏掉的是：子 ol 必须有 counter-reset: subsection;，否则 subsection 会沿用上一个子列表的末值，导致编号错乱。
嵌套层级越深，越要避免命名冲突和重置时机错误；CSS 计数器不支持动态作用域，所有重置都靠显式声明位置决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
