老旧移动端（iOS 12以下、Android 4.4 WebView）完全不支持counter-reset/counters()，连content: counter()都留空；@supports无效，唯一可靠方案是data-*属性+轻量JS配合attr()渲染。
老旧移动端（iOS 12 以下、Android 4.4 WebView）根本不解析 counter-reset 和 counter-increment，不是样式错位，是整个规则被忽略——连伪元素里的 content: counter(item) 都不会计算，直接留空。
为什么 counter() 在 iOS 11 或 UC 浏览器里完全不显示
这些内核的 CSS 解析器遇到 counter()、counters() 函数时，会当作无效值跳过整条 content 声明。不像 CSS 变量还能 fallback，计数器函数没有降级机制，浏览器不支持就是不支持。
- 不是选择器没匹配，也不是 display 属性问题，是语法层面未实现
-
@supports (counter-reset: foo)无效——该语法不被任何旧版移动端识别，@supports块本身会被整个丢弃 - 即使加了
-webkit-前缀也无用，这不是渲染属性，是 CSS Generated Content 模块的一部分，旧 WebKit 根本没接入
替代方案：用 data-* 属性 + 简单 JS 维护编号
放弃纯 CSS 计数，改用语义化标记 + 最小 JS 补充，兼容性拉满且可控。
- 给每个需要编号的元素加
data-counter，初始值可由服务端或构建时写死：<li data-counter="1"></li> - 用轻量脚本遍历并递增：
document.querySelectorAll('ol[data-auto-counter] li').forEach((el, i) => { el.setAttribute('data-counter', i + 1); }); - CSS 只负责渲染：
li::before { content: attr(data-counter) "."; }——attr()在 iOS 6+ 全支持，无风险 - 如需嵌套编号（如 1.2.3），用多级
data-section/data-subsection，JS 拼接后写入单一data-counter
如果必须保留纯 CSS，只在现代环境启用
用 @supports 包裹计数器规则，但必须配无条件 fallback，且 fallback 不依赖计数逻辑。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@supports (counter-reset: x) { ol { counter-reset: item; } }→ 旧系统跳过整块，编号消失 - 正确结构：
li::before { content: "• "; } /* 保底符号 */ @supports (counter-reset: item) { ol { counter-reset: item; } li { counter-increment: item; } li::before { content: counter(item) ". "; } } - 注意：
@supports内不能出现counters()—— Safari ≤15.6 对它有分隔符渲染 bug，iOS 12- 不支持，直接崩
真正麻烦的不是写法，而是「以为写了 counter-reset 就万事大吉」。旧移动端里，它和不存在一样。能用 JS 控制的地方，别赌 CSS 的兼容性；必须用 CSS 的地方，就只用最稳的 attr() + content 组合。
