Pembilang dan skop bersarang HTML menyebabkan senarai tertib 1.1, 1.2 tidak berfungsi dengan betul

Question

我使用嵌套计数器和作用域来创建有序列表：

<code>ol {
    set semula balas: item;
    padding-left: 10px;
}
li {
    paparan: blok
}
li:sebelum {
    kandungan: kaunter(item, ".") " ";
    kenaikan balas: item
}</code>

<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>

我不知道，有人看出哪里出错了吗？

这是一个JSFiddle链接：http://jsfiddle.net/qGCUk/2/

Answer 1

Gunakan gaya ini untuk menukar senarai bersarang sahaja:

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

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

Answer 2

Nyahtanda "Standardize CSS" - http://jsfiddle.net/qGCUk/3/ Tetapan semula CSS yang digunakan dalam ini menetapkan margin dan padding semua senarai kepada 0

KEMASKINI http://jsfiddle.net/qGCUk/4/ - Anda mesti memasukkan subsenarai anda<li> di bahagian utama

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>