counter-reset 必须放在父容器（如 ul）而非子项（li）上才生效，因计数器作用域为块级上下文且仅影响后续同级或子级 counter-increment；嵌套需多级命名（chapter/section），避免冲突。
为什么 counter-reset 放在父容器却没生效
因为计数器作用域是块级上下文，且只对后续的同级或子级 counter-increment 生效。常见错误是把 counter-reset 写在了列表项（li）上，而不是列表容器（ol 或 ul）——这样每次 li 都重置一次，序号永远是 1。
-
counter-reset必须放在最外层包裹元素上，比如ul.course-list - 如果课程大纲有嵌套章节（如「2.1」「2.2」），需用多级计数器：
counter-reset: chapter section - IE11 及以下不支持
counter-set，但counter-reset和counter-increment是兼容的
如何用 ::before + counter() 生成带点的序号（如「1.」「2.」）
直接拼接字符串即可，不需要 JS 或额外 HTML。关键是用 content 中的 counter() 函数加后缀，不是用伪元素内容硬写。
- 写法：
content: counter(item) ".";—— 注意引号内是字面量"."，不是变量 - 如果要补零（如「01」「02」），用
counter(item, decimal-leading-zero) - 避免写成
content: counter(item) ". ";（末尾空格会导致点击区域偏移） - 字体大小、颜色可单独控制伪元素，不影响主文本样式
遇到「序号跳变」或「重复 1」时优先检查什么
这类问题几乎都出在 DOM 结构和 CSS 选择器匹配逻辑上，跟浏览器渲染无关。
- 检查是否意外触发了多次
counter-increment：比如给li设了counter-increment: item，又给它里面的h3也设了同一计数器 - 确认没有隐藏元素（
display: none）干扰计数器递增——display: none的元素不会触发counter-increment，但visibility: hidden会 - 若用
flex或grid布局打乱了文档流顺序，计数器仍按 HTML 顺序执行，可能和视觉顺序不一致
需要动态插入新课程项时，CSS 计数器还可靠吗
可靠，但前提是新增的 DOM 节点符合原有结构规则，并被正确插入到计数器作用域内。
立即学习“前端免费学习笔记（深入）”；
- JS 动态创建
li后，只要它作为子节点 append 到已设counter-reset的ul中，序号自动连续 - 不要手动设置
style="counter-increment: item 5"来“跳号”——这破坏可维护性，且容易错位 - 服务端渲染或 SSR 场景下，确保首屏 HTML 已包含
counter-reset，否则水合后可能闪动
chapter，子级也用 chapter 而非 section，结果所有章节都挤在同一个计数器里跑。 
