HTML嵌套计数器和作用域导致有序列表1.1，1.2无法正常工作

Question

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

<code>ol {
    counter-reset: item;
    padding-left: 10px;
}
li {
    display: block
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}</code>

<code>&lt;ol&gt;
    &lt;li&gt;one&lt;/li&gt;
    &lt;li&gt;two&lt;/li&gt;
    &lt;ol&gt;
        &lt;li&gt;two.one&lt;/li&gt;
        &lt;li&gt;two.two&lt;/li&gt;
        &lt;li&gt;two.three&lt;/li&gt;
    &lt;/ol&gt;
    &lt;li&gt;three&lt;/li&gt;
    &lt;ol&gt;
        &lt;li&gt;three.one&lt;/li&gt;
        &lt;li&gt;three.two&lt;/li&gt;
        &lt;ol&gt;
            &lt;li&gt;three.two.one&lt;/li&gt;
            &lt;li&gt;three.two.two&lt;/li&gt;
        &lt;/ol&gt;
    &lt;/ol&gt;
    &lt;li&gt;four&lt;/li&gt;
&lt;/ol&gt;</code>

我期望的结果如下：

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

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

<code>1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three &lt;!-- 这是出错的地方，当返回到父级时 --&gt;
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four
</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>