Html 三级十进制有序列表

我有一个html的三级有序列表，我想给出如下样式：

1. Item 1
1.1 Item 2
1.1.1 Item 3

html的一个示例在下一个示例中：

我已经做了一个风格推荐在互联网上与css喜欢

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

但它似乎不起作用

---

请注意，任何与此相关的评论都会有很大的帮助。

您的css代码几乎没有问题，请参阅

在级别1之后，您有一个额外的

，因此您的标记变为

<ol>
    <li> Should be Item 1
       <ol>
           <li> Should be Item 1.1</li>
           <li> Should be Item 1.2</li>
           <li> Should be Item 1.3
               <ol>
                   <li> Should be Item 1.3.1</li>
               </ol>
           </li>
           <li>Should be Item 1.4</li> 
       </ol> 
    </li>
    <li> Should be Item 2</li> 
 </ol>

应该是项目1
应为第1.1项
应为第1.2项
应为第1.3项
应为第1.3.1项

应为第1.4项

应为第2项

---

在你的css中，我删除了

ol

的基本列表样式，其中

列表样式：无
使用以下代码：

html:

您提供的HTML格式不正确。固定的
 <ol>
    <li> Should be Item 1        
      <ol>
        <li> Should be Item 1.1</li>
        <li> Should be Item 1.2</li>
        <li> Should be Item 1.3
          <ol>
            <li> Should be Item 1.3.1
          </ol>
        <li>Should be Item 1.4</li> 
      </ol> 
    </li>
    <li> Should be Item 2</li> 
    </ol>

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