訂購的標籤使用類HTML無法與列表工作5

Question

請考慮，我現在用的是body標籤內下面的HTML代碼：

<ol> 
    <li>This is First List Item</li> 
    <ol> 
     <li>Nested List Item</li> 
    </ol> 
</ol> 

<ol> 
    <li>This is Second List Item</li> 
    <ol type = "A"> 
     <li>Nested List Item with different type</li> 
    </ol> 
</ol> 

我使用下面的樣式此：

ol { 
    list-style-type: none; 
    counter-reset: item; 
    margin: 0; 
    padding: 0; 
} 


li { 
    display: table; 
    counter-increment: item; 
    margin-bottom: 0.6em; 
} 

li:before { 
    content: counters(item, ".") ". "; 
    display: table-cell; 
    padding-right: 0.6em;  
} 

li li { 
    margin: 0; 
} 

li li:before { 
    content: counters(item, ".") " "; 
} 

我得到以下輸出：

1 This is First List Item 
1.1 Nested List Item 
1 This is Second List Item 
1.1 Nested List Item with different type 

我期待最後1.1結果爲STA從A開始，因爲我已經提到了它的類型，但它不起作用。我在這裏幹什麼？

這裏是JSFiddle。

Answer 1

從MDN起，ol和ul元素只能包含li元素。這是完成的一件事，其次是你的CSS。 display: table;與list-style-type: none;一起搞砸了。使用開發者控制檯來指導你休息。

<ol> 
    <li>This is Second List Item</li> 
    <li> 
     <ol type = "A"> 
      <li>Nested List Item with different type</li> 
      <li>xyz</li> 
     </ol> 
    </li> 
</ol>