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

我需要缩进有序列表以保持父列表项编号：

我拥有的：

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

有任何想法吗？

您可以使用counters http://www.w3.org/TR/CSS2/syndata.html#counter这样做：

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