CSS计数器在display为none时无法正确使用的解决方法

问题：界面html代码如下，ol里面的内容需要事先隐藏，并给ol加上一个计数器，将该页面ol从隐藏变为显示时，序号全部为0或1，而不是递增序号，所有浏览器都是如此。

<ol id="nav-site" class="state-closed">;
<li ...><a ... >...</a></li>
...
</ol>

解决办法：

首先是查看计数器css属性counter-reset、counter-increment等的使用方法，发现如果使用 "display: none"，则无法重置计数器。如果使用 "visibility: hidden"，则可以重置计数器。猜想是不是display为none时计数器就失效，于是验证之，确实如此，那怎么办呢，该部分必须要隐藏啊。跟同事讨论交流，他的一些想法突然就启发了自己，计数器放在ol上于是跟随着一起被隐藏就失效了，如果在外面加一层<div>并加上计数器，该div不被隐藏，仅仅只是里面的ol隐藏而已，该计数器就用来对ol中的li进行计数，html代码如下：

<div id="navsiteol"><ol id="nav-site" class="state-closed">;
<li ...><a ... >...</a></li>
...
</ol></div>

css代码如下：
#navsiteol { 
  counter-reset: navsite-counter;
}
#nav-site a:before {
  content: counter(navsite-counter) ".";
  counter-increment: navsite-counter;
}

结果问题还真是解决了。