前端技巧关于CSS计数器(counter)的基本用法整理

关于CSS计数器(counter)的基本用法整理

在有序列表的每个列表项前面会默认显示一个数字序号,而在网页设计过程中,有时候也需要给不一定是有序列表的其他元素加上序号,这时候就要用到CSS里的计数器功能,通过计数器可以很方便的给元素加上序号,本文主要分享关于CSS计数器的简单用法。

CSS里的计数器主要有counter-reset属性和counter-increment属性,其中英文单词counter中文翻译为计数器,reset中文为重置,increment中文翻译为增长量。

通过counter-reset属性可以定义计数器的作用范围以及初始值,例如:

counter-reset:s1 3;
 /*--这里的s1是自定义名称,3表示初始值为3,如果不定义初始值,则默认为0--*/

通过counter-increment属性设置选取的作用范围和每次出现的计数器增量,例如:

counter-increment:s1 5;
 /*--这里表示使用s1这个计数器,并每次递增5个数,不设置这个数字则默认为1--*/

设置好计数器之后,就可以通过content:counter(s1)的格式放到需要加序号的元素的伪元素(常用:before)中,下面来看一个示例:

<div id="chem">
 <h3>走进化学世界</h3>
  <h4>物质的变化和性质</h4> 
  <h4>化学是一门以实验为基础的科学</h4>
  <h4>走进化学实验室</h4>
 <h3>物质构成的奥秘</h3>
  <h4>分子和原子 </h4>
  <h4>原子的结构</h4>
 <h3>化学方程式</h3>
  <h4>质量守恒定律</h4>
  <h4>如何正确书写化学方程式</h4>
  <h4>利用化学方程式的简单计算</h4>
</div>

这是某化学书的某页目录,html中没有给它们标上序号,所以现在我创建两个计数器,分别表示章节和单元:

body {counter-reset:s1;}
h3 {counter-reset:s2;}

然后给三个章节的标题前方加上一个伪元素:

h3:before {
counter-increment:s1;
content:"章节" counter(s1)": ";
}

这里没有设置计数器初始值和增量,因为它们的默认值分别是0和1,所以默认情况下该计数器就是从1开始计算的(0+1=1)。这里在计数器的前方增加了章节两个字,在计数器后面增加了一个冒号和空格,注意增加的字符应该用引号引起来。这时候,浏览网页发现章节名已经增加了序号:

CSS计数器.png

接下来为单元名称增加序号,给单元名使用第二个计数器:

h4:before {
counter-increment:s2;
content:counter(s1) "." counter(s2) " ";
}

这里在两个计数器之间采用英文句号连接,便可以输出“1.1,1.2……”这样的序号,在序号后面增加了一个空格,这里的空格也需要加引号,否则是无效的,这样一来,章节和单元都已经加上序号了:

CSS计数器2.png

由于序号是通过伪元素的方式添加的,所以可以通过CSS定义序号的显示样式,比如:

h4:before {background:#19c;color:#fff;padding:0 5px;margin:0 10px;}

加上样式后,显示的效果会不会更美观呢,如下图:

CSS计数器3.png

除了数字序号外,还可以将序号类型改为字母或罗马数字等,只需在上述的content:counter(s1)中增加样式就行了,常见的用法如下:

content:counter(s1,lower-roman) 表示小写罗马数字(i, ii, iii, iv, v……)

content:counter(s1,upper-roman) 表示大写罗马数字(I, II, III, IV, V……)

content:counter(s1,lower-alpha) 表示小写英文字母(a, b, c, d, e……)

content:counter(s1,upper-alpha) 表示大写英文字母(A, B, C, D, E……)

例如,我将上例中的单元序号更改一下样式,如下图:

CSS计数器4.png

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.medwheat.com.cn/skill/138.html