CSS计数器
我们在编辑网页时常常需要一些序号,css计数器就可以帮助我们实现根据一定规则来递增变量。
css计数器有以下几个属性:
counter-reset 创建或者重置计数器
counter-increment 递增变量
content 插入生成的内容
counter() 或 counters() 函数 将计数器的值添加到元素中
- 常规使用
要使用css计数器首先就是要使用counter-reset属性来创建计数器,属性值就是计数器名称,也可以设置从哪个数字开始计数。计数器要在使用计数值元素的父元素中进行创建。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>啊哈</title>
<style>
body {
counter-reset: section ;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>使用 CSS 计数器:</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavaScript </h2>
</body>
</html>
运行结果如下:
counter-increment 属性值就是递增变量,同时变量名称后边可以通过设定一个数字来确定增长方式,默认是+1增长,正数表示每次递增正数个(先递增再输出),负数表示递减(也是先递减再输出)。
<style>
body {
counter-reset: section 2;/* 计数器名称section ,从2的下一位开始计数*/
}
h2::before {
counter-increment: section 2;
content: "Section " counter(section) ": ";
}
</style>
此时结果如下:
<style>
body {
counter-reset: section 8;/* 计数器名称section ,从2的下一位开始计数*/
}
h2::before {
counter-increment: section -3;
content: "Section " counter(section) ": ";
}
</style>
此时结果如下:
content 属性可以可以任意设定生成内容样式,同时用 ::before 和 ::after 伪元素来讲生成的内容进行插入,再使用counter将计数器的值输出到元素中。
<style>
body {
counter-reset: section;
}
h2::after {
counter-increment: section;
content: "-> ""Section " counter(section) ;
}
</style>
- 嵌套
css计数器可以进行嵌套。需要注意的就是要在正确的元素中创建计数器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>aha</title>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML: </h1>
<h2>HTML </h2>
<h2>HTML5</h2>
<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
</body>
</html>
- 计数器应用到列表中
计数器应用到列表中时,列表的子元素会自动创建。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>aha</title>
<style>
ol {
counter-reset: section;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
运行结果如下:
显然,我们在列表中使用了元素嵌套,同时列表的子元素可以自动产生序号。
- 最后 counter-reset属性不仅可以创建和重置一个计数器,也可创建多个计数器,各个计数器名字之间用空格隔开。counter-increment属性也是。对于同一个计数器,counter-reset、counter-increment和counter()属性值要保持一致,不然无法使用。