display:none 元素完全脱离渲染树，counter-increment 彻底失效；visibility:hidden 保留渲染树位置可正常计数，但需处理布局、可访问性及伪元素限制等问题。
counter-increment 在 display:none 元素上根本不会执行，这不是差异，而是彻底失效；visibility:hidden 下能正常计数，但需注意布局和可访问性影响。
为什么 display:none 会让 counter-increment 失效
浏览器把 display:none 元素完全移出渲染树，它连“存在”都不被计算在内。counter-increment 只作用于参与布局的节点，不是“写在哪就生效”，而是“谁在树里谁计数”。伪元素（如 ::before）也跟着消失，自然无法触发或显示。
-
display:none的元素及其所有伪元素都不会生成、不参与任何样式计算 - 即使 DOM 中存在，CSS 计数器逻辑根本不扫描它
- 这不是兼容性问题，是 CSS 规范明确定义的行为
visibility:hidden 能计数，但别只改这一行
它保留元素在渲染树中、占文档流位置、触发 counter-increment，但直接替换 display:none → visibility:hidden 很可能引发布局错位或语义异常。
- 原为
display:inline或 flex 子项时，visibility:hidden仍会撑开容器、影响对齐 - 屏幕阅读器默认仍朗读该元素，若本不该被读取，必须加
aria-hidden="true" - 若要“隐藏且不占空间”，得配合
position:absolute或width:0;height:0;overflow:hidden，但这已脱离纯 CSS 计数器设计初衷
counter-increment 写在伪元素上无效
很多人误以为 h2::before { counter-increment: section; } 可以递增，其实不行——伪元素不能作为计数器递增的锚点。
立即学习“前端免费学习笔记（深入）”；
-
counter-increment必须作用于真实 DOM 元素（如h2、.item） - 写在
::before或::after上会被浏览器静默忽略，无报错、无日志、不计数 - 但伪元素可以安全使用
counter()或counters()显示值，前提是父元素已正确递增
动态插入元素后编号不更新？这不是 bug
counter-increment 是声明式、一次性渲染行为，不监听 DOM 变化。JS 插入新节点后，即使匹配选择器，也不会自动补计数。
- 临时方案：给新元素加一个强制重绘 class，例如
el.classList.add("force-repaint")，配合极短动画 - 更稳做法：对整个容器重置
counter-reset，再让所有子项重新匹配counter-increment - 注意：
display:none元素插入后仍不会计数；而visibility:hidden元素只要在 DOM 中，插入即计入
真正关键的是「节点是否进入渲染树」，而不是你写了多少行 CSS。最容易被忽略的，是把 counter-reset 放在错误层级——比如放在全局 wrapper 上，却期望每个折叠区块独立编号，结果所有计数串在一起。作用域锚点错了，再怎么调 visibility 都没用。
