能，需配合counter-reset和counter-increment；单靠content静态值无法动态递增；多级序号用多组计数器及counter()第二参数指定格式（如decimal、lower-roman）；但不可替代，因可访问性差、打印异常且旧浏览器兼容问题多。
伪元素 ::before 和 ::after 能否生成动态序号？
能，但必须配合 counter-increment 和 counter-reset 使用；单靠 content: "1. " 这类静态写法做不到“动态”。浏览器不会自动识别你写的数字并递增，它只当普通字符串渲染。
常见错误现象：content: "第" counter(item) "项" 没生效，页面显示空白或原样输出文字；或者所有项都显示“1”，完全不递增。
- 必须在父容器上设置
counter-reset: item（否则计数器无初始值） - 每个要编号的元素需触发
counter-increment: item（否则不累加） -
counter()函数只能用在content属性里，其他地方无效
多级嵌套列表怎么用 CSS 伪元素生成「1.1」「1.2.3」这类序号？
靠多组独立计数器 + counter() 的第二个参数控制格式。一级用 counter(section)，二级用 counter(subsection)，并在二级元素上同时做 counter-increment: subsection 和 counter-reset: subsection（重置子计数器）。
容易踩的坑：counter-reset 写错层级——比如在 li 上重置子计数器，但实际结构是 ol > li > ol > li，那重置动作得落在内层 ol 上，而不是外层 li。
示例关键片段：
ol { counter-reset: section; }
ol > li { counter-increment: section; }
ol > li::before { content: counter(section) ". "; }
ol ol { counter-reset: subsection; }
ol ol > li { counter-increment: subsection; }
ol ol > li::before { content: counter(section) "." counter(subsection) " "; }
counter() 的第二个参数有哪些合法值？影响什么？
它控制数字格式，不是随便填字符串。合法值包括 decimal、lower-roman、upper-alpha、lower-greek 等，和 list-style-type 的取值基本一致。
为什么要注意这个？因为 counter(section, lower-roman) 在 Safari 旧版本中可能回退为 decimal，而 counter(section, "一") 是非法写法，直接导致整个 content 失效（表现为伪元素不渲染）。
-
decimal：1, 2, 3（默认） -
lower-roman：i, ii, iii -
upper-alpha：A, B, C - 不支持自定义中文数字（如“一”“二”），也不能用
"第" counter(x) "条"拼接后让计数器自动转中文
用伪元素序号替代 HTML 中的 <ol></ol> 是否可靠？
不可靠，尤其在可访问性和打印场景下。屏幕阅读器通常忽略 ::before 生成的内容，用户无法通过语义获知这是有序列表；打印时部分浏览器可能不渲染伪元素，或序号与内容错位。
性能影响倒很小，CSS 计数器是声明式、无 JS 开销的；但兼容性有硬伤：IE 不支持 counter() 的嵌套调用（如 counter(a) "." counter(b)），Android 4.3 WebView 会跳过整个 content 声明。
真正该用伪元素序号的场景只有两个：需要脱离语义的视觉装饰（比如侧边栏小标题编号）、或已有 DOM 结构无法改造成 <ol></ol> 且明确接受可访问性折损。
复杂点在于：序号逻辑一旦跨出线性流（比如用 float 或 grid 打乱顺序），CSS 计数器仍按源码顺序计数，和视觉顺序对不上——这时候人眼看到的“第3个”，CSS 仍认为是“第1个”，没法修正。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
