当前位置: 首页 » 前端开发 » CSS计数器:给列表自动增加序号[转]
 |  全屏浏览  |  字号调整:

CSS计数器:给列表自动增加序号[转]

2014-10-11 15:43:26 前端开发 0 868 百度已收录
本文最后更新于2014-10-11,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天:10月20日 - 1962年,中印边境自卫反击战爆发

周六下午好, 本文除去代码部分,共1039个字,预计阅读时间需要3分钟。

一个多行的文本列表,用样式的:before选择器集合content属性,可以每一行文本前面增加指定内容,如增加数字序号:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
ul{list-style:none;padding:0;margin:0;}
li:before{content:'1.';}
</style>
 
<ul>
    <li>文本文本</li>
    <li>文本文本</li>
    <li>文本文本</li>
    <li>文本文本</li>
    <li>文本文本</li>
    <li>文本文本</li>
    <li>文本文本</li>
</ul>

上图代码效果如下图:

它自动给每行文本前面加了序号“1.”,但是序号没有自动递增。要自动就要使用样式方法,是的,样式也像js一样有方法。这里要用counter方法,它接收一个表示计数器名字的参数,形如:

1
li:before{content:counter(tom);}

但是那个“tom”的名字哪来的呢?

“tom”由父元素声明而来,父元素声明方式:

1
ul{counter-reset:num;}

总的来说就是父元素用counter-reset声明一个计数器,然后子元素通过content属性和counter方法来使用这个计数器。

设置计数器的同时我们可以设置计数器的初始值,缺省的情况下,默认初始值为0,如果我们要初始值为1,就这样:

1
ul{counter-reset:num 1;}

但是所谓序号自动增加并不总是1、2、3、4、5、…..这种增量为1的增加的,有的时候自增量可能是2或者其他的大小,我们可以设置增量吗?

事实是我们可以通过counter-increment设置自增步长,而且必须使用counter-increment!

此属性第一个参数是计数器名称,不可缺省,用来说明自己设置的是哪个计数器的步长,第二个参数是步长值。第二个参数可以缺省,缺省就默认步长为1,所以完整的自动给文字列表加序号的代码是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
ul{counter-reset:num;}
li:before{content:counter(num);counter-increment:num;}
</style>
 
<ul>
    <li>文本文本</li>
    <li>文本文本</li>
    <li>文本文本</li>
    <li>文本文本</li>
    <li>文本文本</li>
    <li>文本文本</li>
    <li>文本文本</li>
</ul>

效果如下:

如果想给序号和文字间加间隔符号呢,比如点“.”,可以修改content属性的值如下:

1
content:counter(num) '.';

在原有的counter(num)样式方法后增加空格和单引号包围的“.”,最后效果如下:

这里演示的是文本,但列表的内容不限于文本可以是图片等其他内容。

参考文章:
http://www.zhangxinxu.com/wordpress/?p=739
http://my.oschina.net/710409599/blog/307410

本文标题:CSS计数器:给列表自动增加序号[转]

本文地址:http://www.hehaibao.com/css-counter/

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!


发表评论

电子邮件地址不会被公开。 必填项已用*标注