HTML嵌套計數器和作用域導致有序列表1.1，1.2無法正常運作

Question

<p>我使用聖誕老人和作用域來建立社群清單：</p> <pre class="snippet-code-css lang-css Prettyprint-override"><code>ol { 計數器重置：項目； 左內邊距：10px； } 李{ 顯示：區塊 } 李：之前{ 內容：計數器（項目，“。”）“”； 反增量：項目 }</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><code><ol> <li>一</li> <li>兩個</li> <ol> <li>二.一</li> <li>二.二</li> <li>二.三</li> </ol>

三

<ol>

三.一

三.二

<ol>

三.二.一

三.二.二

</ol> </ol> <li>四</li> </ol></code></pre> <p><br />></p> <p>我所期望的結果如下：</p>

1.一
2. 兩個
  2.1.二.一
  2.2.二.二
  2.3.二三
3. 三
  3.1 三.一
  3.2 三.二
    3.2.1 三.二.一
    3.2.2 三.二.二
4. 四</pre>
<p>但實際上，我看到的是<strong>（錯誤的編號）</strong>：</p>
<程式碼>1.一
2. 兩個
  2.1.二.一
  2.2.二.二
  2.3.二三
2.4 三
  2.1 三.一
  2.2 三.二
    2.2.1 三.二.一
    2.2.2 三.二.二
2.3 四
</代號></pre>
<p>我不知道，有發現哪裡出錯了嗎？</p>
<p>這是一個JSFiddle連結：http://jsfiddle.net/qGCUk/2/</p>

Answer 1

使用這個樣式只改變巢狀清單：

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

取消勾選「標準化CSS」 - http://jsfiddle.net/qGCUk/3/ 在此中使用的CSS重置將所有清單的邊距和填充設定為0

更新 http://jsfiddle.net/qGCUk/4/ - 您必須在主要的<li>中包含您的子列表

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>