如何调整CSS中嵌套列表的编号

Question

我想在ol内创建包含列表项的嵌套有序列表li：

1.  Lorem ipsum
1.1 Lorem ipsum
10.1.1  Lorem ipsumLorem ipsum
10.1.2  Lorem ipsum
10.1.3  Lorem ipsum
10.2    Lorem ipsum

我尝试了这个scss（在stackoverflow上找到），但遗憾的是我预期10.2我得到了10.1.4。

＆＃13;

＆＃13;

ol {
  counter-reset: item;
}

ol>li {
  counter-increment: item;
}

ol ol>li {
  display: block;
}

ol ol>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

ol ol ol>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

＆＃13;

<ol>
  <li>
    <h2>Personal information</h2>
    <ol>
      <li></li>
      <ol>
        <li></li>
        <li></li>
        <li></li>
      </ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>

＆＃13;

＆＃13;

＆＃13;

您可以在此处https://jsfiddle.net/bqw457ef/

查看问题

Answer 1

您关闭第二级的<li>太快了。第三级完成后关闭它。

＆＃13;

＆＃13;

ol {
  counter-reset: item;
}

ol>li {
  counter-increment: item;
}

ol ol>li {
  display: block;
}

ol ol>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

ol ol ol>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

＆＃13;

<ol>
  <li>
    <h2>Personal information</h2>
    <ol>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这就是你需要的。下面是代码。更新ol > li

的规则

ol {
  counter-reset: item;
}

ol > li {
  counter-increment: item;
  content: counters(item, ".");
}

ol ol > li {
  display: block;
}

ol ol > li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

ol ol ol > li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

<ol>
  <li>Lorem
    <ol>
      <li>Lorem ipsum
        <ol>
          <li>Lorem ipsum dolor
          </li>
          <li>sit amet, consectetur
          </li>
          <li>adipiscing elit, sed
          </li>
        </ol>
      </li>
      <li>dolor sit</li>
    </ol>
  </li>
</ol>