有没有办法像使用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