如何利用CSS counter实现移动端列表序号自增？-css教程-PHP中文网

css计数器需配合content属性才能显示，移动端常见问题包括：漏写content、ios safari旧版不支持多参数content、中文数字兼容性差、嵌套列表计数异常及可访问性缺失。

如何利用css counter实现移动端列表序号自增？

为什么 `counter-increment` 在移动端列表里不生效？

直接给 li 加 counter-increment: item; 却没显示序号，大概率是漏了 content 声明——CSS 计数器本身不输出内容，只是维护一个数值，必须配合 ::before 或 ::after 的 content: counter(item); 才能渲染出来。

移动端尤其容易踩这个坑：有些同学在伪元素里写 content: "第" counter(item) "项";，结果发现 iOS Safari 15.4 之前不支持多参数 content（会整个失效），得改用单个 counter() 或拼接字符串的变通方式。

确保父容器先用 counter-reset: item; 初始化计数器
counter-increment 要作用在实际渲染的元素上（比如 li），不是 ul
伪元素必须声明 display: inline; 或类似值，否则在部分安卓 WebView 中可能不触发渲染

如何让序号支持中文数字（一、二、三）或带括号格式？

counter() 函数第二个参数就是样式控制，不用 JS 拼接。移动端兼容性较好的取值有：decimal（默认 1,2,3）、lower-roman（i,ii,iii）、lower-greek（α,β,γ），但中文数字（cjk-ideographic）在 Android 10 以下和旧版 UC 浏览器中基本不支持。

稳妥方案是用 decimal + CSS 伪类模拟：比如 content: counter(item) "、";，再通过 font-family 指定支持中文字体的栈，视觉上更协调；真要中文数字，建议降级为 JS 控制，或服务端渲染。

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

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

下载

counter(item, lower-latin) → a, b, c（适合小范围选项）
counter(item, decimal-leading-zero) → 01, 02（注意 iOS 16+ 才完全支持）
避免用 counter(item, cjk-ideographic)，实测在华为鸿蒙 4.2 自带浏览器中返回空字符串

嵌套列表怎么让子序号变成 1.1、1.2、2.1？

靠多级 counter-reset 和 counter() 的嵌套调用。父 ul 重置 section，子 ul 再重置 subsection，然后在 li::before 里用 counter(section) "." counter(subsection) 拼接。

但要注意：iOS Safari 对多层 counter() 的嵌套支持不稳定，尤其是当子列表被 display: none 切换显示时，计数器可能不会重新计算。解决方案是避免动态显隐，改用 visibility: hidden + height: 0 组合，或者给子列表加 counter-reset: subsection; 到每个 li 上（而非只在 ul 上）。

外层 ul { counter-reset: section; }，内层 ul { counter-reset: subsection; }
li::before { content: counter(section) "." counter(subsection); counter-increment: subsection; }
如果子列表可能为空，记得给 ul:empty { display: none; }，否则空 ul 仍会触发 counter-reset 干扰计数

用 CSS counter 做序号，性能和可访问性要注意什么？

序号纯属视觉增强，不能替代语义结构。屏幕阅读器默认不读取 content 生成的内容，所以仅靠 counter() 显示的“1.”、“2.”对视障用户不可见。

性能方面，深层嵌套（>5 层）或超长列表（>200 项）在低端安卓机上可能引发重排延迟，因为每次 counter-increment 都需遍历计算。更严重的是，若在滚动容器里使用 position: sticky + counter，某些 Android Chrome 版本会出现序号错位——根本原因是 sticky 元素的层叠上下文干扰了计数器作用域。