display:none会使counter-increment失效，因为该属性将元素彻底移出渲染树，计数器无法作用于不存在布局中的元素；而visibility:hidden保留元素在渲染树中，可正常触发计数。
为什么 display:none 会让 counter-increment 失效
因为 CSS 计数器只在**渲染树中参与布局的元素**上生效。display:none 会把元素彻底从渲染树中移除，浏览器连它的存在都不“知道”，自然不会执行 counter-increment。这不是 bug，是规范行为。
而 visibility:hidden 只隐藏视觉表现，元素仍保留在渲染树中、占据空间、参与计数——这是最直接的替代方案。
用 visibility:hidden 替代时要注意的三件事
别只改 display，否则可能引发意外布局跳变或语义断裂：
-
visibility:hidden仍占文档流位置，如果原元素是display:inline或display:flex子项，突然变成“隐形但占位”，可能撑开容器或影响对齐 - 若需完全不占空间又保留计数，得配合
position:absolute+clip-path:inset(100%)或width:0; height:0; overflow:hidden等 hack，但已脱离纯 CSS 计数器初衷 - 屏幕阅读器默认仍会读取
visibility:hidden元素（除非加aria-hidden="true"），若该元素本就不该被读取，需额外处理
counter-increment 在 visibility:hidden 下是否真能工作
能，且稳定。只要元素在 DOM 中、未被 display:none 移除、且样式规则匹配到它，计数就会累加。验证很简单：
立即学习“前端免费学习笔记（深入）”；
.item {
counter-increment: section;
visibility: hidden;
}
.item::before {
content: "第 " counter(section) " 节";
visibility: visible; /* 让伪元素可见，而父元素不可见 */
}上面这段代码中，.item 自身不可见，但其 ::before 伪元素因显式设了 visibility:visible 而显示计数结果——这说明计数器已在隐藏元素上正确递增。
更隐蔽的问题：伪元素触发计数 vs 元素自身触发
很多人误以为必须在目标元素上写 counter-increment 才能计数，其实不是。只要选择器匹配到一个**存在于渲染树中的节点**，哪怕只是伪元素，也能触发：
-
.item::before { counter-increment: section; }—— 每个::before都会触发一次计数，即使.item是visibility:hidden - 但如果
.item是display:none，那么::before根本不会生成，计数自然失效 - 所以真正关键的是「节点是否进入渲染树」，而不是「写在哪一行 CSS 上」
计数逻辑本身不关心你藏没藏它，只关心它有没有被浏览器“看见”。visibility:hidden 是最轻量、最符合直觉的“藏而不删”方案，但得同步检查它对布局和可访问性的真实影响。
