<p> <pre class="snippet-code-css lang-css Prettyprint-override"><code>ol { Zähler-Reset: Artikel; padding-left: 10px; } li { Bildschirmsperre } li:vor { Inhalt: counters(item, ".") " "; Zählerinkrement: Artikel }</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><code><ol> <li>eins</li> <li>zwei</li> <ol> <li>zwei.eins</li> <li>zwei.zwei</li> <li>zwei.drei</li> </ol> <li>drei</li> <ol> <li>drei.eins</li> <li>drei.zwei</li> <ol> <li>drei.zwei.eins</li> <li>drei.zwei.zwei</li> </ol> </ol> <li>vier</li> </ol></code></pre> <p><br /></p> <p>我期望的结果如下:</p> <pre class="brush:php;toolbar:false;">1. eins 2. zwei 2.1. zwei eins 2.2. zwei zwei 2.3. zwei drei 3. drei 3.1 drei.eins 3.2 drei.zwei 3.2.1 drei.zwei.eins 3.2.2 drei.zwei.zwei 4. vier</pre> <p>但实际上，我看到的是<strong>（错误的编号）</strong>:</p> <pre class="lang-html Prettyprint-override"><code>1. eins 2. zwei 2.1. zwei eins 2.2. zwei zwei 2.3. zwei drei 2.4 drei <!-- 这是出错的地方，当返回到父级时 --> 2.1 drei.eins 2.2 drei.zwei 2.2.1 drei.zwei.eins 2.2.2 drei.zwei.zwei 2,3 vier </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>