html - 三级十进制有序列表 CSS

Question

我在 html 中有一个三级有序列表，我想给出如下样式:

1. Item 1
1.1 Item 2
1.1.1 Item 3

下一个 plunker 中有一个 html 示例:

http://plnkr.co/edit/DqhZ5pJILTUHGSNaA1vm?p=preview

我用css like做了一个网上推荐的样式

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

但它似乎不起作用。

拜托，任何相关的评论都会有很大的帮助。

Answer 1

使用以下代码:

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>

CSS:

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