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 返回下一篇:没有了