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了。
从这个链接可以查看完整示例以及API详解。
CSS多级数字序号的目录列表(类似3.3.1.这样的列表序号)的更多相关文章
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- proc文件系统探索 之 以数字命名的目录
在proc根目录下,以数字命名的目录表示当前一个运行的进程,目录名即为进程的pid.其内的目录和文件给出了一些关于该进程的信息. niutao@niutao-desktop:/proc/6584$ l ...
- 对象列表转换为DataTable或DataTable转换为对象列表.
/**********************************************************************************/ // 说明: 数据转换工具. ...
- js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现
React-Native在0.43推出了两款新的列表组件:FlatList(高性能的简单列表组件)和SectionList(高性能的分组列表组件). 从官方上它们都支持常用的以下功能: 完全跨平台. ...
- 我的Android进阶之旅------>Android【设置】-【语言和输入法】-【语言】列表中找到相应语言所对应的列表项
今天接到一个波兰的客户说有个APP在英文状态下一切运行正常,但是当系统语言切换到波兰语言的时候,程序奔溃了.所以首先我得把系统的语言切换到波兰语,问题是哪个是波兰语呢? 我还真的不认识哪个列表项代表着 ...
- 布尔上下文,这里misreading返回的是来源列表中元素的个数,如果列表中2个值都是undef,则列表元素个数是1: while( $misreading = (my $test_consideration, my $english_pragma) = each %map_function){
布尔上下文,这里misreading返回的是来源列表中元素的个数, 列表赋值运算的值将会是来源列表中元素的个数,空列表表示0,如果列表中2个值都是undef,则列表元素个数是1 布尔上下文,这里mis ...
- 编写Java程序_输入本部门五位员工的薪资,并根据用户输入的序号为指定员工进行提薪。若用户输入序号出现越界,则提示错误。
要求说明: 输入本部门五位员工的薪资,并根据用户输入的序号为指定员工进行提薪.若用户输入序号出现越界,则提示错误. 运行效果如图: 实现代码: import java.util.Scanner; pu ...
随机推荐
- spring mvc json 返回乱码问题解决(vestion:3.x.x)
本文是转载文章,感觉比较好,如有侵权,请联系本人,我将及时删除. 原文网址:<spring mvc json 返回乱码问题解决(vestion:3.x.x)> 工程中用springmvc返 ...
- [深入React] 9.小技巧
如果组件没有state那就可以精简成一个render function var Item = function(props){ return _('div',null,'名称:'+props.name ...
- EF中主表和附表一起提交的话,如果主附表的主键外键已经设定。
EF中主表和附表一起提交的话,如果主附表的主键外键已经设定,如果新增同时新增主表和附表的记录,那么在EF同时提交时,不需要人为的设定附表的主表的主键值,EF会自动为附表添加外键值.
- (转)最近研究xcodebuild批量打包的一些心得
以前的时候只知道做安卓开发的兄弟挺辛苦的,不但开发的时候要适配一堆的机型,好不容易开发完了还要打一堆不同的包给不同的市场.没想到现在这些市场都开辟iOS市场,于是需要打一堆的包给不同的市场,面对暂时给 ...
- 判断IE版本的HTML语句详解<!--[if IE]> <![endif]--> - AnswerCard
一个页面里面只能有一句这样的判断 我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请 ...
- HTTP Status 404(The requested resource is not available)的几种解决方法
原因:servlet没有配置正确 ,查看web.xml确认正确,以及自己的请求路径正确 在IE中提示“404”错误有以下三种情况 1.未部署Web应用 2.URL输入错误 排错方法: 首先,查看URL ...
- KindEditor简单的Demo使用
一般的做网站后台都会用到富文本编辑器,网上也有很多优秀的富文本编辑器,这里是开源中国的富文本编辑器推荐:http://www.oschina.net/project/tag/172/wysiwyg 我 ...
- js生成随机数的方法小结
js生成随机数主要用到了内置的Math对象的random()方法.用法如:Math.random().它返回的是一个 0 ~ 1 之间的随机数.有了这么一个方法,那生成任意随机数就好理解了.比如实际中 ...
- SqlServer 不同服务器之间数据库连接、数据库登录、数据传递
需求:我是本地数据库想纯SQL访问其它服务器上的数据库,而不使用数据库客户端的连接.这里面就想到了数据库link,通过下面的代码进行创建以后,就可以在本地对链接的服务器数据库进行操作了--添加SQLS ...
- sqlite--代码操作
1.创建数据库 NSString * docPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainM ...