<p>我使用嵌套计数器和作用域来创建有序列表：</p> <pre class="snippet-code-css lang-css prettyprint-override"><code>ol { set semula balas: item; padding-left: 10px; } li { paparan: blok } li:sebelum { kandungan: kaunter(item, ".") " "; kenaikan balas: item }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><ol> <li>satu</li> <li>dua</li> <ol> <li>dua.satu</li> <li>dua.dua</li> <li>dua.tiga</li> </ol> <li>tiga</li> <ol> <li>tiga.satu</li> <li>tiga.dua</li> <ol> <li>tiga.dua.satu</li> <li>tiga.dua.dua</li> </ol> </ol> <li>empat</li> </ol></code></pra> <p><br /></p> <p>我期望的结果如下：</p> <pre class="brush:php;toolbar:false;">1. satu 2. dua 2.1. dua.satu 2.2. dua.dua 2.3. dua tiga 3. tiga 3.1 tiga.satu 3.2 tiga.dua 3.2.1 tiga.dua.satu 3.2.2 tiga.dua.dua 4. empat</pra> <p>但实际上，我看到的是<strong>（错误的编号）</strong>：</p> <pre class="lang-html prettyprint-override"><kod>1. satu 2. dua 2.1. dua.satu 2.2. dua.dua 2.3. dua tiga 2.4 tiga <!-- 这是出错的地方，当返回到父级时 --> 2.1 tiga.satu 2.2 tiga.dua 2.2.1 tiga.dua.satu 2.2.2 tiga.dua.dua 2.3 empat </code></pre> <p>我不知道，有人看出哪里出错了吗？</p> <p>这是一个JSFiddle链接：http://jsfiddle.net/qGCUk/2/</p>

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

ol {
  counter-reset: item
}
li {
  display: block
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>