【求解】关于HTML的计数器counter

[SunSeast]

ul{
  list-style:none;
  counter-reset: item;
}

ul li:before{
  content: counters(item, ".") "#  ";
  counter-increment: item;
}

<ul>
      <li>This is item number 1.
      <ul>
          <li>This is item number 1.1.
          <li>This is item number 1.2.
      </ul>
      <li>This is item number 2.
        <ul>
          <li>This is item number 2.1.
          <li>This is item number 2.2.
        </ul>
    </ul>

页面显示结果：
1# This is item number 1.
1.1# This is item number 1.1.
1.2# This is item number 1.2.
2# This is item number 2.
2.1# This is item number 2.1.
2.2# This is item number 2.2.

哪位大侠帮忙讲解下原理，html每一步是怎么解释的，要详细的每一步，就html代码，像:before、list-style这些就不用了
一直搞不懂这段代码的计数器是怎么计数的