HTMLCSS多级嵌套列表编号

概述参见英文答案 > Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, …) with css?                                     10个 有没有办法使用直接HTML和CSS列表(< ul>或< ol>)来实现以下编号？ 1. Link 1 参见英文答案 > Can ordered list produce result that looks like 1.1,1.2,1.3 (instead of just 1,2,3,…) with css? 10个
有没有办法使用直接HTML和CSS列表(< ul>或< ol>)来实现以下编号？

1. link 12. link 23. link 3    3.1. link 3.1    3.2. link 3.2    3.3. link 3.34. link 4    4.1. link 4.1        4.1.1 link 4.1.1        4.1.2 link 4.1.25. link 5

提前致谢！

解决方法 您可以使用CSS counters：

ol {    counter-reset: section;    List-style-type: none;}li:before {    counter-increment: section;    content: counters(section,".") ". link " counters(section,".") " ";}

工作演示(also on JSBin)：

ol {  counter-reset: section;  List-style-type: none;}li:before {  counter-increment: section;  content: counters(section,".") " ";}

<ol>  <li></li>  <li></li>  <li>    <ol>      <li></li>      <li></li>      <li></li>    </ol>  </li>  <li>    <ol>      <li>            <ol>        <li></li>        <li></li>        </ol>      </li>    </ol>  </li>  <li></li></ol>

总结

以上是内存溢出为你收集整理的HTML / CSS多级嵌套列表编号全部内容，希望文章能够帮你解决HTML / CSS多级嵌套列表编号所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。