iOS Safari ≤16.6 中子 ul 的 counter-reset 不生效，是因为 display: flex 的父 li 阻断了计数作用域，需将 counter-reset 移至父 li 并设 display: block；IE11 和 Android 4.4 WebView 中 counters() 不支持或分隔符错位，应降级为单级 counter() 加 data-level 标记；CSS 计数器不响应 DOM 增删，动态场景需 JS 控制；Obsidian 等环境中须用局部容器加作用域前缀避免全局污染。
为什么 iOS Safari ≤16.6 中子 ul 的 counter-reset 不生效？
根本不是写法错，而是 display: flex 的父 li 阻断了计数作用域——counter-reset 只在生成块级格式化上下文（BFC）的元素上才创建新计数器作用域，而 display: flex 或 inline 会让父容器无法触发该上下文，导致子 ul 继承而非重置计数器。
- 不要把
counter-reset: item写在子ul上，它此时没用 - 改写到父
li上，并显式设li { display: block; } - 避免
float、inline-block或contain: layout，它们都会干扰 BFC 创建
IE11 和 Android 4.4 WebView 怎么让多级编号勉强可用？
counters() 在这些环境里完全不支持或分隔符错位（比如输出 1..1 而非 1.1），不能硬扛，得降级。
- 放弃
counters(section, ".")，改用单级counter(section)+ 手动 HTML 层级标记（如加data-level="2"） - 分隔符只能用英文点
"."、短横"-"或斜杠"/"，禁用空格或中文 -
counters()第二个参数必须是字符串字面量，counters(step, var(--sep))这种写法直接被忽略
动态插入/删除 DOM 后编号卡在旧值怎么办？
CSS 计数器不响应 DOM 增删，这是规范行为，不是 bug。删除一个 li 后编号不会自动重排，新增项也不会“填补空缺”。
- 不要依赖
display: none隐藏来跳过计数——它仍会counter-increment - 真要跳过，用
visibility: hidden+counter-increment: none - 若需实时重排（如拖拽排序），CSS 计数器不适合，应改用 JS 生成序号并写入
data-属性
Obsidian 或其他富文本编辑器里 counter-reset 全是 “Fig. 1”？
不是 CSS 写错了，是作用域失控：Obsidian 把笔记内容注入已有 DOM，全局 body { counter-reset: figureCounter } 会被多个笔记复用，每次渲染都重置。
立即学习“前端免费学习笔记（深入）”；
- 弃用
body，改用语义化局部容器，如<div class="figure__wrapper"> <li> <code>.figure__wrapper { counter-reset: figureCounter; }必须写在该容器上，不能靠祖先继承 - 确保只用
::before（双冒号），:before在部分 Obsidian 主题中失效
实际项目里最容易被忽略的，是「计数器名不能跨容器复用」——同一页面多个
.figure__wrapper 没问题，但若在某个 aside 里也用了 counter-reset: figureCounter，就可能污染主图编号。命名最好带作用域前缀，比如 figureMain 和 figureSidebar。
