Html 有序列表 1.1、1.2（嵌套计数器和范围）不起作用

Question

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

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

 <ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <li>four</li>
</ol>

我期待以下结果：

 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

相反，这是我看到的 （错误编号） ：

 1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three <!-- this is where it goes wrong, when going back to the parent -->
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

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

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

原文由 dirk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

取消选中“规范化 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>

原文由 Zoltan Toth 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我认为这些答案过于复杂了。如果您不需要支持 Internet Explorer，那么解决方案是单线：

 ol > li::marker { content: counters(list-item, '.') '. '; }

 <ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <li>four</li>
</ol>

有关更多信息，请参阅 ::marker CSS 伪元素页面 和 MDN 的 CSS 参考网站上的 使用 CSS 计数器页面。

原文由 Tyler Crompton 发布，翻译遵循 CC BY-SA 4.0 许可协议