CSS多级数字序号的目录列表(类似3.3.1.这样的列表序号)

编写文档手册的时候,我们经常需要列表项前面的序号将上级各层的序号也附加在前面,如下图:
 
(图一) 
 
但默认的<ol>列表,任何层次都是单个序号开始。如下图:
(图二)
 
 
要实现图一效果,方法之一是直接将序号部分作为列表内容的一部分,插入相应的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)". ";}  
效果就是本篇开头的图一。
 
可是这个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,".")". ";}  
这样,无论多少层的嵌套列表,都能正确显示级联序号了,效果如本篇开头的图一。
需要指出的是,:before, counter-increment 等相关CSS特性不支持古老的IE6/IE7,但是IE8及以上是支持的很好的。
 
自己写完之后,才发现,原来在MDN上早已有了这个DEMO了。
 
传送门:Using CSS Counters  
 
从这个链接可以查看完整示例以及API详解。
更多相关文章
  • 我们知道,在c++中,析构函数是在函数作用域尾部执行析构函数,从而释放对象,但是有一种情况下,析构函数作用域发生变化,请看下面的例子,定义了一个Stock类,Stock类存放在stock.h中,主调用函数在stock.cpp中. stock.h 1 #include <iostream> ...
  • 微软前工程师 Nathan Myhrvold 设立的创意公司 Intellectual Ventures Laboratory 公布了一项任性的发明:用激光打蚊子. 这种灭蚊神器被称为“光剑”(Photonic Fence),是一把微型激光炮,全自动击发,三十米范围内百发百中. 图片来自:http: ...
  • 一旦那些被临时追捧的热门词汇已经不再能激起我们的兴趣,那么它们往往会快速湮没在炒作的地平线之外,甚至彻底从我们的头脑中消失.以Cobol为 例,这一时代的遗物就像是过了保质期的鱼虾,被追求时尚的技术专家们抨击为:无用.腐朽.过时而且不再适合实际需求的产物.与之同理,Java很可能成为 下一种继续留存 ...
  • 命令行参数 1. sys.argv[1:]为要处理的参数列表, sys.argv[0]为脚本名, sys.argv[1:]过滤脚本名. 2. “hc:o:”当选项(h)表示开关状态时,后面不带附加参数. 当选项(c:或o:)带附加参数时,选项字符后面加一个”:”号. 3. getopt函数返回两个列 ...
  • 一个数据库包含一个或者多个命名的模式,模式又可以包含表等数据库对象.模式有点类似于命名空间,我们可以在不同的命名空间中使用相同的名称而不会冲突.模式不是严格分离的,它只是一个逻辑上的区分. 模式的创建语法格式: create schema 模式名: 模式的删除语法格式: drop schema 模式 ...
  • 易网科技讯 1月15日消息,知情人士透露,苹果公司CEO库克已于今日再次到访中国,本周还将参与中国移动4G版iPhone5s/5c发售. 这是库克担任苹果CEO以来的第四次访华,上一次来访时间是2013年7月. 消息人士预计,库克此行的主要目的,是助阵中国移动4G版iPhone5s/5c发售.此外, ...
一周排行
  • 首先增加一个脚本库,可以是Zepto或者jQuery的,然后获取之后使用switch进行分流处理 <script type="text/javascript" src="/Res/ ...
  • 观自在菩萨,行深般若波罗蜜多时,照见五蕴皆空,度一切苦厄.舍利子,色不异空,空不异色,色 即是空,空即是色,受想行识,亦复如是.舍利子,是诸法空相,不生不灭,不垢不净,不增不减.是故空中无色,无受想行识,无眼耳鼻舌身 ...
  • 一.基本的Oracle存储结构:表空间与数据文件 Oracle数据库中具有两种类型的存储:物理存储和逻辑存储. 上面的Oracle存储结构模型中,可以看出下列要素: 每个数据库(Database)都必须由一个或多个表 ...
  • 北京商报讯(记者 吴辰光)网络游戏再次成为易网的功臣.昨日,据易网发布的今年一季度业绩数据显示,其净利润以及游戏收入均创历史新高.
  • sql之distinct语句   distinct这个关键字用来过滤掉多余的重复记录只保留一条,但往往只用它来返回不重复记录的条数,而不是用它来返回不重记录的所有值.其原因是distinct只有用二重循环查询来解决, ...
  • Josephina and RPG Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
  • 一.变量的定义与赋值 declare @变量名 类型 set @变量名=值 eg.    查汽车表中名称含有宝马两个字的declare @name varchar(20)set @name='宝马'select * ...
  • Here is a simple algorithm about 'decimal' to 'dexadecimal',and the implementation code: 1 /* 2 Convert from ...
  • 想黄金斗士note8将拥有众多的版本,根据不同网络制式.内存大小分为标准版和增强版,相信很多朋友都有这样的疑问:联想黄金斗士Note8标准版与增强版有什么区别?哪个好?下面小编就为大家详细介绍一下,一起来看看吧 联想 ...
  • 继承于HashMap,定义了新的内部类Entry用于实现双向链表保存记录的插入或访问顺序: accessOrder用于指示链表保存记录采用的顺序,true为访问顺序,false为插入顺序: 加入新的记录时需要更新链表 ...