html - 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

我正在寻找的是：

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

有任何想法吗？

Answer 1

受 DON 回答的启发，我玩弄了 counters 属性并设法使以下工作：

 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;
 }

我不相信这是最干净的解决方案，因为我不太了解内容元素，但这肯定会为您提供一个有序列表，该列表根据父容器的最后一个列表项增加子级列表项。

Answer 2

您可以使用计数器来执行此操作：

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