HTML有序列表缩进以保持原始编号

Question

我需要缩进有序列表，以保持父级列表项的编号:

我现在的情况:

 // My code:
 <ol>
      <li>Item 1</li>
      <li>
           Item 2
           <ol>
                <li>Item 2.1</li>
                <li>Item 2.2</li>
           </ol>
      </li>
      <li>Item 3</li>
 </ol>

等等。

现在我得到的结果是：

      // Result:
      1. Item 1
      2. Item 2
           Item 1
           Item 2
      3. Item 3

What i'm looking for is:

      // Looking for:
      1. Item 1
      2. Item 2
           2.1 Item 2.1
           2.2. Item 2.2
      3. Item 3

有什么想法吗？

- mauzilla

---

可能是重复的内容：如何在HTML中对嵌套有序列表进行编号？ - Jukka K. Korpela

Answer 1

您可以使用计数器来实现：

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

- Hary

Answer 2

受 DON 的回答启发，我尝试了一下计数器属性并成功地做出了以下效果：

 ol {
     counter-reset: item;
     list-style-type: none;
 }

 ol li:before {
     font-weight: bold;
     content: counters(item,".")".   "; 
     counter-increment: item;
 }

 ol ol {
     counter-reset: subitem;
     list-style-type: none;
 }

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

我并不确定这是最干净的解决方案，因为我对内容元素不是很了解，但这肯定会给你一个有序列表，根据它们父容器的最后一个列表项递增子级列表项。

- mauzilla