HTML命令列表1.1、1.2嵌套计数器和作用域不起作用

如何解决HTML命令列表1.1、1.2嵌套计数器和作用域不起作用

取消选中“规范化CSS” 使用的CSS重置将所有列表边距和填充默认设置为0

您必须在主目录中包含子列表<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>

解决方法

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

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/