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发售.此外, ...
一周排行
  •   Problem Description Ignatius被魔王抓走了,有一天魔王出差去了,这可是Ignatius逃亡的好机会. 魔王住在一个城堡里,城堡是一个A*B*C的立方体,可以被表示成A个B*C的矩阵,刚开 ...
  • //保存文件的路径,包括文件名  private string GetSavePath(string FileName)  {  string path=Request.PhysicalApplicationPath ...
  • [原创]windows server 2012 AD架构 试验 系列 - 2创建AD单林单域 DNS与DC分开 DNS信息 name :dc1 Dns IP ADDRESS: 192.168.20.100 DC信息 ...
  • http://blog.csdn.net/guoguo1980/article/details/2324454
  • 易网科技讯 北京时间元月20日消息,美国股市周二收涨.截止周二收盘,道琼斯工业平均指数上涨115.78点,报收于10,725.40点,涨幅1.09%:标普500指数上涨14.20点,报收于1,150.23点,涨幅1. ...
  • 31.如果表达式x*y+z中,"*"是作为友元函数重载的,"+"是作为友元函数重载的,则该表达式还可为( ) A.operator+(operator*(x,y),z) B.x ...
  • 谈到GDB,不能不对他的强大功能所折服,在我所用过的所有调试器中,这实在是一个强大的调试工具,今天就说说GDB的简单用法.GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.或许,各位比较喜欢那种图形界面 ...
  • “微软从一开始就打通了私有云和公有云在企业中的障碍,企业从基于windows server的私有云向windows azure的公有云迁移时,是可以很简便.安全的实现的.”在前不久的全球云计算大会上,微软云战略高级总 ...
  • 问题聚焦:    进程是Linux操作系统环境的基础.    本篇讨论以下几个内容,同时也是面试经常被问到的一些问题:    1 进程映像的fork系统调用和替换进程映像的exec系列系统调用    2 僵尸进程  ...
  • 在用matplotlib绘图需要在图片中加入公式时,一般要用 text 或 annotate函数,并结合latex语法 '$...$'. 对于分数,如果直接使用\frac{}{},会造成分子分母上的字都很小,如下图中 ...