counter-reset 不响应式重置，只按 dom 结构初始化一次；需用结构隔离（如分设 .nav-desktop/.nav-mobile）或 js 动态控制才能实现移动端展开时重新编号。
counter-reset 不能“响应式重置”——它只按 DOM 结构触发，和媒体查询、display 切换、折叠状态都无关。想让导航在移动端展开时重新编号，必须靠结构隔离或 JS 干预。
为什么 counter-reset 在折叠/展开导航里不重置
常见错误是给导航容器（如 .nav）加 counter-reset: item;，再用 @media 控制子项显隐。但问题在于：counter-increment 按 DOM 顺序执行，不随 display: none 或 visibility: hidden 改变；counter-reset 也只在元素渲染时初始化一次，不会因媒体查询生效而重新触发。
典型现象：.nav 在桌面端有 5 个 li，编号为 1–5；切到移动端后只显示前 2 个（其余 display: none），但编号仍是 1–2，而非重新从 1 开始——因为计数器上下文没被切断。
-
counter-reset不响应 CSS 状态变化，包括@media、display、visibility、transform - 隐藏的
li仍参与counter-increment计算（只要它在 DOM 中） - 伪元素
::before的content只读取当前计数器值，不感知“当前可见项有多少”
counter-reset 必须放在“逻辑分组容器”上，不是导航根容器
要实现“每组导航独立编号”，得把计数器作用域锚定在每个可折叠单元内部，而不是整个 .nav。比如移动端下每个 .nav-group 是一个折叠区块，就该在它身上设 counter-reset: nav-item;。
错误写法：.nav { counter-reset: nav-item; } → 所有子项共享一个计数器，无法分组重置
正确写法：.nav-group { counter-reset: nav-item; }，再让 .nav-group > li 触发 counter-increment: nav-item;
- 每个
.nav-group都是独立计数器实例，折叠/展开互不影响 - 即使
.nav-group被display: none，只要它存在 DOM 中，其子项仍会按需递增（但内容不显示） - 若需完全隔离（比如只对当前展开的组计数），就得用 JS 动态切换 class 或移除隐藏项
多级导航中 counters() 和嵌套 counter-reset 的配合要点
如果导航含二级菜单（如 .nav-group > li > .submenu），且希望编号为 “1.1”、“1.2”、“2.1” 这类形式，必须用 counters()，且父级必须设 counter-reset，否则会断档。
例如：
nav { counter-reset: level-1; }
.nav-group { counter-reset: level-2; }
.nav-group > li::before {
counter-increment: level-1;
content: counter(level-1) ". ";
}
.nav-group > li > .submenu > li::before {
counter-increment: level-2;
content: counters(level-1, ".") "." counter(level-2) " ";
}
-
counters(level-1, ".")能向上找到最近的counter-reset: level-1，但如果.nav-group没设counter-reset: level-2，level-2就不会创建新作用域，所有二级项都会共用一个计数器 - 不要复用同一计数器名跨逻辑组（如用
item同时编号主菜单和侧边栏），会导致编号串扰 - Safari（iOS 16.4–17.2）在
display: grid容器内可能忽略首个counter-increment，建议对.nav-group显式加counter-reset并避免用grid布局做计数容器
真正“响应式重置”的可行方案只有两种
纯 CSS 无法监听折叠状态并重置计数器。能落地的只有：
- 结构隔离：为桌面版和移动版分别写两套 DOM（如
.nav-desktop/.nav-mobile），各自设独立counter-reset—— 最稳定，但增加 HTML 复杂度 - JS 辅助：监听
resize或折叠按钮点击，动态给当前可见的li加 class（如data-nav-index="1"），再用content: attr(data-nav-index)替代 CSS 计数器 —— 灵活但失去纯 CSS 优势
最容易被忽略的一点：CSS 计数器没有“条件重置”机制。所谓“响应式重置”，本质是欺骗浏览器——让它以为你换了新容器，而不是试图让旧容器在不同视口下执行两次 counter-reset。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
