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发售.此外, ...
一周排行
  • 大家可能试过用windows远程登录另一个windows pc机,今天大家将会学到如何用 linux远程登录你的windows系统. 首先大家要做到得救是将自己linux和windows操作机的IP地址设为同一段,并 ...
  •   二分的好题.错了几次.关键是需要考虑周全,不然容易跪..枚举以i(0<i<m) 为最终放至全为1的列,那么只要只知道 i 最靠近i的左右两边含有1的列最靠近  i,有可能是末尾或则开头的那个含1的列. ...
  • 你的桌面是不是已经被各种各样的图标占去了很多?或许你根本没有在意过这些图标,或许你早已经为这些图标烦恼不已,其实这小小的图标里也大有学问哦.本文将带大家去一探图标的奥妙. 图标是一个程序的链接按钮,它既有美观的要求, ...
  • 一.<!--[endif]-->停止Oracle数据库服务 shutdown immediate; <!--[if !supportLists]-->二.<!--[endif]--> ...
  • php无限极分类 CODE=PHP]至于添加删除之类的功能我就不多写了!仔细看看就知道这么用了.难的是显示方面希望高手扩展一下! QUOTE:这是类<?php/*======================== ...
  • 常人偶尔打个盹偷个懒无可厚非.但当身边的同事每每工作拖泥带水,态度敷衍了事,甚至下班时间没到就撂挑子走人,预计你也非常难注意自己的素养了.是当面谴责他的行为?或是向老板告状?还是干脆少吃咸鱼少口干,做好自己才是真? ...
  • 据外电报道,自由软件基金会将在下周对外公布“通用公共许可协议”(GPL)第三版的第一个草案.统管自由软件的GPL如何“大修”将引起开源业界的激烈辩论.自由软件基金会日前表示,本月16日,该组织将在美国麻省理工学院召开 ...
  • 概要        前两篇文章:        <Android 2.3 Gallery3D添加gif支持--概要(一)>        <Android 2.3 Gallery3D添加gif支持- ...
  • NSLog的定义 NSLog定义在NSObjCRuntime.h中,如下所示: void NSLog(NSString *format, -); 基本上,NSLog很像printf,同样会在console中输出显示结 ...
  • http://blog.csdn.net/wawxf2008/article/details/8054943 Eclipse输出错误reason: Connection to https://dl-ssl.googl ...