有没有办法只使用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) " ";
}

小提琴

参考文献:

CSS counter-reset属性