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

haibao 笔记 2014-10-11 15:43 707
一个人的价值, 在于他贡献了什么, 而不在于他获得了什么。——爱因斯坦

凌晨好, 本文除去代码部分,共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/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

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