CSS多级别数据编号的文件目录目录(2.2.1. 2.2.2 目录

日期：2021-03-02 类型：科技新闻 

关键词：如何制作微信小游戏，微信游戏小程序，公众号游戏，h5小游戏模板，小程序游戏源码

撰写文本文档手册的情况下，大家常常必须目录项前面的编号将上级各层的编号也额外在前面，以下图：

(图1)

 

但默认设置的<ol>目录，任何层级全是单独编号刚开始。以下图：

(图2)

要完成图1实际效果，方式之1是立即将编号一部分做为目录內容的1一部分，插进相应的HTML，可以使用js大批量插进编号。

转化成的HTML結果相近这样

<ol>  
  <li>1. 目录项  
    <ol>  
      <li>1.1. 目录项  
        <ol>  
          <li>1.1.1 目录项</li>  
          <li>1.1.2 目录项</li>  
          <li>1.1.3 目录项</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
</ol>

 
假如既不想将编号硬写在html编码里，也不想引进js，那末只能从HTML特性和CSS两个层面来提升了。

遗憾的是，HTML元素特性并沒有出示相近的插口。

经网友提醒，了解了有个叫css counter 的定义，我少见多怪了。

查寻相关文本文档以后，CSS处理计划方案也就有了。

HTML编码以下：

<ol>  
  <li>目录项  
    <ol>  
      <li>目录项  
        <ol>  
          <li>目录项</li>  
          <li>目录项</li>  
          <li>目录项</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
</ol>

CSS编码以下：

ol {padding:0 0 0 20px;margin:0;list-style:none;}  
li:before {color:#f00; font-family:Times New Roman;}  
li{counter-increment:a 1;}  
li:before{content:counter(a)". ";}  
li li{counter-increment:b 1;}  
li li:before{content:counter(a)"."counter(b)". ";}  
li li li{counter-increment:c 1;}  
li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";}


实际效果便是本篇开始的图1。

但是这个CSS写的确实是丑恶，有几级文件目录，就得写几层的CSS，明显不可该是这模样的。

再次阅读文章了有关文本文档，确立了counter-reset , counter(), counters() 以后，发现难题竟是出现异常的简易。

CSS编码以下：

ol {padding:0 0 0 20px;margin:0;list-style:none;counter-reset:a;}  
li:before {counter-increment:a;content:counters(a,".")". ";}

这样，不管是多少层的嵌套循环目录，都能正确显示信息联级编号了，实际效果如本篇开始的图1。
必须指出的是，:before, counter-increment 等有关CSS特点不适用古老的IE6/IE7，可是IE8及以上是适用的很好的。

以上便是网编梳理的所有內容啦，期待对大伙儿有一定的协助。

上一篇：CSS 同级元素position:fixed和margin 返回下一篇：没有了