编写文档手册的时候,我们经常需要列表项前面的序号将上级各层的序号也附加在前面,如下图:

(图一) 

但默认的<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详解。

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

  1. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. proc文件系统探索 之 以数字命名的目录

    在proc根目录下,以数字命名的目录表示当前一个运行的进程,目录名即为进程的pid.其内的目录和文件给出了一些关于该进程的信息. niutao@niutao-desktop:/proc/6584$ l ...

  3. 对象列表转换为DataTable或DataTable转换为对象列表.

    /**********************************************************************************/ // 说明: 数据转换工具. ...

  4. js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  5. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  6. React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现

    React-Native在0.43推出了两款新的列表组件:FlatList(高性能的简单列表组件)和SectionList(高性能的分组列表组件). 从官方上它们都支持常用的以下功能: 完全跨平台. ...

  7. 我的Android进阶之旅------>Android【设置】-【语言和输入法】-【语言】列表中找到相应语言所对应的列表项

    今天接到一个波兰的客户说有个APP在英文状态下一切运行正常,但是当系统语言切换到波兰语言的时候,程序奔溃了.所以首先我得把系统的语言切换到波兰语,问题是哪个是波兰语呢? 我还真的不认识哪个列表项代表着 ...

  8. 布尔上下文,这里misreading返回的是来源列表中元素的个数,如果列表中2个值都是undef,则列表元素个数是1: while( $misreading = (my $test_consideration, my $english_pragma) = each %map_function){

    布尔上下文,这里misreading返回的是来源列表中元素的个数, 列表赋值运算的值将会是来源列表中元素的个数,空列表表示0,如果列表中2个值都是undef,则列表元素个数是1 布尔上下文,这里mis ...

  9. 编写Java程序_输入本部门五位员工的薪资,并根据用户输入的序号为指定员工进行提薪。若用户输入序号出现越界,则提示错误。

    要求说明: 输入本部门五位员工的薪资,并根据用户输入的序号为指定员工进行提薪.若用户输入序号出现越界,则提示错误. 运行效果如图: 实现代码: import java.util.Scanner; pu ...

随机推荐

  1. spring mvc json 返回乱码问题解决(vestion:3.x.x)

    本文是转载文章,感觉比较好,如有侵权,请联系本人,我将及时删除. 原文网址:<spring mvc json 返回乱码问题解决(vestion:3.x.x)> 工程中用springmvc返 ...

  2. [深入React] 9.小技巧

    如果组件没有state那就可以精简成一个render function var Item = function(props){ return _('div',null,'名称:'+props.name ...

  3. EF中主表和附表一起提交的话,如果主附表的主键外键已经设定。

    EF中主表和附表一起提交的话,如果主附表的主键外键已经设定,如果新增同时新增主表和附表的记录,那么在EF同时提交时,不需要人为的设定附表的主表的主键值,EF会自动为附表添加外键值.

  4. (转)最近研究xcodebuild批量打包的一些心得

    以前的时候只知道做安卓开发的兄弟挺辛苦的,不但开发的时候要适配一堆的机型,好不容易开发完了还要打一堆不同的包给不同的市场.没想到现在这些市场都开辟iOS市场,于是需要打一堆的包给不同的市场,面对暂时给 ...

  5. 判断IE版本的HTML语句详解<!--[if IE]> <![endif]--> - AnswerCard

    一个页面里面只能有一句这样的判断 我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请 ...

  6. HTTP Status 404(The requested resource is not available)的几种解决方法

    原因:servlet没有配置正确 ,查看web.xml确认正确,以及自己的请求路径正确 在IE中提示“404”错误有以下三种情况 1.未部署Web应用 2.URL输入错误 排错方法: 首先,查看URL ...

  7. KindEditor简单的Demo使用

    一般的做网站后台都会用到富文本编辑器,网上也有很多优秀的富文本编辑器,这里是开源中国的富文本编辑器推荐:http://www.oschina.net/project/tag/172/wysiwyg 我 ...

  8. js生成随机数的方法小结

    js生成随机数主要用到了内置的Math对象的random()方法.用法如:Math.random().它返回的是一个 0 ~ 1 之间的随机数.有了这么一个方法,那生成任意随机数就好理解了.比如实际中 ...

  9. SqlServer 不同服务器之间数据库连接、数据库登录、数据传递

    需求:我是本地数据库想纯SQL访问其它服务器上的数据库,而不使用数据库客户端的连接.这里面就想到了数据库link,通过下面的代码进行创建以后,就可以在本地对链接的服务器数据库进行操作了--添加SQLS ...

  10. sqlite--代码操作

    1.创建数据库 NSString * docPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainM ...