counter-reset和counter-increment在媒体查询中不生效，因其基于DOM遍历计算而非运行时变量；正确做法是为不同断点定义独立选择器（如.list-mobile）并重置计数器，确保作用域与当前渲染结构严格匹配。
为什么 counter-reset 和 counter-increment 在媒体查询里不生效？
直接在 @media 规则里写 counter-reset 或 counter-increment 不会重置或改变计数器状态——CSS 计数器是基于 DOM 树遍历顺序计算的，不是运行时变量。媒体查询只控制样式展示，不能干预计数逻辑。
- 正确做法：用不同选择器配合独立的
counter-reset，比如给移动端列表加class="list-mobile"，并在该 class 下重置计数器 - 常见错误：写
@media (max-width: 768px) { ol { counter-reset: item 0; } }—— 这不会重置已渲染的计数器，只会对新匹配的元素生效（但ol已存在） - 真正生效的写法是：
.list-mobile { counter-reset: item 0; }，再配合.list-mobile li::before { counter-increment: item; content: counters(item, ".") ". "; }
如何让嵌套列表编号显示为 “1.1”、“1.2” 而不是 “1”、“2”？
counters() 函数专为此设计，它比 counter() 多一个分隔符参数，能递归拼接父级计数器值。
-
counter(item)只取当前层级的值；counters(item, ".")会把所有嵌套层级的item计数器用点号连接 - 必须确保每一层
li都有counter-increment: item，且父容器（如ol或ul）设置了counter-reset: item - 注意：如果某层用了
ul但没设counter-reset，它的子项仍会继承上层计数器，导致编号错乱（例如 “1.1.1” 变成 “1.1.2”）
怎么用 CSS counter 替代 <ol type="a"> 实现字母编号 + 响应式切换？
原生 type 属性无法响应式切换（比如小屏用数字、大屏用字母），而 CSS counter 可以结合 content 和 Unicode 字符动态生成。
- 数字转字母：用
content: counter(item, lower-alpha) "．";（注意是中文顿号“．”，不是英文句点） - 响应式切换示例：
ol.alpha-list { counter-reset: item; } ol.alpha-list li { counter-increment: item; } ol.alpha-list li::before { content: counter(item, lower-alpha) ". "; } @media (max-width: 600px) { ol.alpha-list li::before { content: counter(item) ". "; } } - ⚠️ 兼容性提醒：
lower-alpha在 Safari 15.4+ 才完全支持，旧版需 fallback 到 JS 或手动映射（如content: "a" / "b"）
为什么 ::before 里的 counter() 显示 NaN 或空白？
最常见原因是元素未触发计数器递增，或选择器未匹配到实际 DOM 节点。
立即学习“前端免费学习笔记（深入）”；
- 检查是否漏写了
counter-increment—— 仅counter-reset不足以让counter()显示数值 - 确认目标元素是块级或伪元素可渲染的上下文（
display: inline的span用::before没问题，但若父容器overflow: hidden且内容过短，可能裁掉伪元素） - 避免在
display: none元素上设置counter-increment—— 它仍会计数，但后续可见元素编号会跳变 - 调试技巧：临时加
border: 1px solid red到::before，确认伪元素是否渲染、位置是否被遮挡
ul 在桌面端是子菜单，在移动端收进汉堡菜单后 DOM 结构不变，但视觉层级变了，这时 counter-reset 的放置位置就得按实际渲染结构重新判断。 
