Verschachtelte HTML-Zähler und -Bereiche führen dazu, dass die geordneten Listen 1.1 und 1.2 nicht ordnungsgemäß funktionieren

Question

<code>ol {
    Zähler-Reset: Artikel;
    padding-left: 10px;
}
li {
    Bildschirmsperre
}
li:vor {
    Inhalt: counters(item, ".") " ";
    Zählerinkrement: Artikel
}</code>

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

我期望的结果如下:

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

但实际上，我看到的是（错误的编号）:

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

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

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

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>