三級十進制有序列表CSS

Question

我在html中有三級有序列表，我想給一個樣式如下：

1. Item 1 
1.1 Item 2 
1.1.1 Item 3 

的HTML的一個例子是，在未來plunker：

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

我已經做了與CSS互聯網推薦風格類似

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

但它似乎不工作。

請相關的任何評論將是一個很大的幫助。

Answer 1

你的CSS代碼幾乎是罰款，看到http://plnkr.co/edit/wmGhz7V6CKqZ7MmHIoDF?p=preview

你1級之後有一個額外的</li><li>，讓您的標記變得

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

，並在你的CSS我已經刪除了基礎列表樣式ol與list-style: none;

Answer 2

使用下面的代碼：

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 }