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发售.此外, ...
一周排行
  • 概念 异步编程核心为异步操作,该操作一旦启动将在一段时间内完成.所谓异步,关键是实现了两点:(1)正在执行的此操作,不会阻塞原来的线程(2)一旦启动的此操作,可以继续执行其他任务.当该操作完成时,将调用回调函数来通知 ...
  •     方法一:利用栈实现 C++代码: #include "stdafx.h" #include <iostream> #include <stack> using na ...
  • 两个activity传递数据和返回数据时,请求方的onActivityResult始终无响应,通过debug调试模式也没见调用该方法.查看了各种配置和程序代码,均未发现有错误之处.后来仔细阅读API说明,恍然大悟,原 ...
  • 沃尔沃与网易携手举办专题,真我新格调,共同探寻"第二种人生,真我新格调",其中有一位真我新格调的践行者叫做苏东,他说了这样一段话,让人感触很深.苏东说:"我觉得真我生活就是脱下面具,真诚 ...
  • 本报讯 (记者刘新宇)"每次都扯上我",合肥三洋(600983)董事长金友华这样抱怨,尽管海尔收购三洋白电业务没有涉及合肥三洋,但这家上市公司仍被舆论聚焦.本报上周五披露,三洋电机集团内的9家(日 ...
  • 来源: ChinaUnix博客 日期:2008.03.14 0 (共有0条评论) 我要评论//--------------------------------------------------------- ...
  •   1.Firefox浏览器中,运行此代码的时候,只执行了第一个select,第二个select没有执行click事件:     结果在Chrome中执行是OK的! selects=browser.find_elem ...
  • 拥有近七年的历史的网游<梦幻西游>,对很多玩家来讲既是新颖奇特的,又是普通正常的.它的奇特,在于历经七年而玩家热情有增无减,在于成功的使游戏社区化.市场化,不能纳入我们过去的游戏经验和旧有的游戏模式框架: ...
  • 洛克王国动力叮叮是洛克王国新出的宠物,洛克王国动力叮叮在哪呢?洛克王国动力叮叮如何练级呢? 洛克王国动力叮叮是洛克王国新出的宠物,洛克王国动力叮叮在哪呢?洛克王国动力叮叮如何练级呢?洛克王国动力叮叮在哪练级呢?我们一 ...
  • 地理围栏技术 本词条缺少信息栏.名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 地理围栏(Geo-fencing)是LBS的一种新应用,就是用一个虚拟的栅栏围出一个虚拟地理边界.当手机进入.离开某个特 ...