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发售.此外, ...
一周排行
  • phpcms2008 search.php注入漏洞 http://www.worldream.net.cn/member/search.php?username=admin&dosubmit=%C1%A2%B ...
  • 易网科技讯 5月10日消息,2012年全球移动互联网大会于今日正式召开,灵动快拍CEO王鹏飞在现场接受了易网科技的独家专访.王鹏飞表示,其二维码扫描生成应用Quick拍市场表现良好,截至今年3月底,灵动快拍的激活用户 ...
  • 沃尔玛入股1号店事宜已经完成交易,目前双方团队已经开展对接,今后双方会在供应链.物流和自有品牌商品等多方展开合作."相关交易已经完成,当然不便透露具体的数字.我们双方的相关团队已经开始了业务对接." ...
  • 在我们不断地对网络协议进行学习的过程中,应该对网络协议分析软件有所了解.那么这里我们则重点结婚扫的是ethereal网络协议分析软件.ethereal网络协议分析软件可以用来从网络上抓包,并能对包进行分析.下面介绍w ...
  • iphone6国行什么时候上市?相信很多大陆果粉都一直都在关心这个问题吧,现在终于有答案了,国行苹果iPhone6\6 Plus就要来了,工信部部长苗圩透露,iPhone6在大陆市场上市所需的入网审核已经进入最后阶段 ...
  • 标 题: [原创]ring3下的IAT HOOK作 者: hostzhen时 间: 8,3链 接: http://bbs.pediy.com/showthread.php?t=1669 ...
  • <本文转自:http://www.cppblog.com/woaidongmao/archive/2009/10/22/99211.aspx> 本文翻译自debugInfo网站上一篇文章generatin ...
  • 在做并发开发的时候,为了保证某对象的线程安全,一般都会对其用Synchronized进行保护,比如: synchronized(obj) {    // Do something with obj. } 当所有对ob ...
  • 文章原创,转载请注明链接   这两天一直为此事头疼,今天终于搞定了,总结一下 多线程程序的线程函数需要使用类的成员变量和成员函数时,通常通过定义线程函数为类的友元函数,然后才能像类自己的成员函数一样访问其成员变量和成 ...
  • 1.fork()     一个程序一调用fork函数,系统就为一个新的进程准备了前述三个段,首先,系统让新的进程与旧的进程使用同一个代码段,因为它们的程序还是相同的,对于数据段和堆栈段,系统则一份给新的进程,这样,父 ...