<p>我使用嵌套计数器和作用域来创建有序列表：</p> <pre class="snippet-code-css lang-css prettyprint-override"><code>ol { counter-reset: item; padding-left: 10px; } li { display: block } li:before { content: counters(item, ".") " "; counter-increment: item }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><ol> <li>one</li> <li>two</li> <ol> <li>two.one</li> <li>two.two</li> <li>two.three</li> </ol> <li>three</li> <ol> <li>three.one</li> <li>three.two</li> <ol> <li>three.two.one</li> <li>three.two.two</li> </ol> </ol> <li>four</li> </ol></code></pre> <p><br /></p> <p>我期望的结果如下：</p> <pre class="brush:php;toolbar:false;">1. one 2. two 2.1. two.one 2.2. two.two 2.3. two.three 3. three 3.1 three.one 3.2 three.two 3.2.1 three.two.one 3.2.2 three.two.two 4. four</pre> <p>但实际上，我看到的是<strong>（错误的编号）</strong>：</p> <pre class="lang-html prettyprint-override"><code>1. one 2. two 2.1. two.one 2.2. two.two 2.3. two.three 2.4 three <!-- 这是出错的地方，当返回到父级时 --> 2.1 three.one 2.2 three.two 2.2.1 three.two.one 2.2.2 three.two.two 2.3 four </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>