有沒有辦法像使用HTML5和CSS一樣創建多級列表？

Question

我想用HTML5和CSS只創建這樣的列表：

1 First 
    1.1 Indent 1 
    1.2 Indent 2 
2 Second 
    2.1 Indent 1 
    2.2 Indent 2 
    2.2.1 More depth 

我檢查多個教程上有序列表，但它似乎<ol>標籤沒有做選擇所以。是否可以使用HTML5和CSS？

Answer 1

可以使用before僞元素來實現這一目標：

HTML

<ul class="numeric"> 
<li>First 
    <ul> 
     <li>Indent </li> 
     <li>Indent </li> 
    </ul> 
</li> 
<li>Second 
    <ul> 
     <li>Indent</li> 
     <li>Indent</li> 
    </ul> 
</li> 
<li>Third 
     <ul> 
      <li>Indent</li> 
      <li>Indent</li> 
      <li>Indent</li> 
      <li>Indent</li> 
     </ul> 
    </li> 
<li>Fourth 
    <ul> 
     <li>Indent</li> 
     <li>Indent</li> 
    </ul> 
</li> 
<li>Five</li> 

CSS

ul.numeric { counter-reset:section; list-style-type:none; } 
ul.numeric li { list-style-type:none; } 
ul.numeric li ul { counter-reset:subsection; } 
ul.numeric li:before{ 
    counter-increment:section; 
    content:counter(section) ". "; 
} 
ul.numeric li ul li:before { 
    counter-increment:subsection; 
    content:counter(section) "." counter(subsection) " "; 
} 

fiddle

個

參考文獻：

CSS counter-reset Property