其他
现代CSS:你了解的CSS 计数器
在程序设计中,计数器是一种变量,它保存的数值会根据可定制的规则递增。计数器有很多用途,例如通过存储循环的执行次数来帮助跟踪循环。虽然计数器在编程语言中经常使用,但在层叠样式表(CSS)的语法中,计数器并不包括在内。在使用现代 CSS 之前,为了跟踪页面上的元素样式,要么是在标记中手动完成,要么是使用 JavaScript 进行统计。但现在,CSS 拥有一个支持良好的计数器属性,无需 JavaScript 即可跟踪增量。
1.CSS 计数器兼容性
2.CSS 计数器属性
counter-reset: counter-name start-value
主要用于创建或复位计数器。
counter-name:计数器的唯一标识符。 start-value:可选项,标识计数器的初始值。如果未指定,默认值为 0。
counter-increment: counter-name increment-value
主要用于增加或减少计数器的值
counter-name:要递增的计数器的标识符。 increment-value:要递增计数器的值。这是可选项,如果未指定,默认值为 1。
content 属性
要显示计数器的当前值,我们可以将 content 属性与 ::before 或 ::after 伪元素结合使用。content 属性使用以下语法显示计数器:
content: counter(counter-name, style);
counter-name:要显示的计数器的标识符。 style:显示计数器值的样式。这是可选项,如果未指定,默认为十进制。
counter() 或 counters() 函数
主要用于将计数器的值添加到元素中。
要使用 CSS 计数器属性,首先必须使用 counter-reset 属性创建计数器,然后重置计数器。默认情况下,使用 counter-reset 属性值初始化为 0。
3.CSS 计数器应用场景
CSS 计数器的主要应用场景为页面元素编号,比如榜单、排序之类的展现需求,以及一些表格类型的行数统计。
3.1.页面元素编号
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 注意,此处我使用了 Native CSS Nesting */
.counter {
counter-reset: counter1;
& h1 {
font-size: 24px;
counter-reset: counter2;
&::before {
counter-increment: counter1;
content: counter(counter1) ". ";
}
}
& h2 {
font-size: 18px;
text-indent: 2em;
&::before {
counter-increment: counter2;
content: counter(counter1) "." counter(counter2) ".";
}
}
}
</style>
</head>
<body>
<div class="counter">
<h1>CSS counter example</h1>
<h2>CSS counter Item</h2>
<h2>CSS counter Item</h2>
<h1>CSS counter example</h1>
<h2>CSS counter Item</h2>
<h2>CSS counter Item</h2>
</div>
</body>
</html>
展现效果:
3.2.计算元素数量
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {background-color: #282c34;}
.counter {
counter-reset: counter1;
color: #fff;
& h1 {
font-size: 24px;
counter-reset: counter2;
&::before {
counter-increment: counter1;
content: counter(counter1) ". ";
}
}
& h2 {
font-size: 18px;
text-indent: 2em;
&::before {
counter-increment: counter2;
content: counter(counter1) "." counter(counter2) ".";
}
}
.total-h1 {
&::before {
content: counter(counter1);
}
}
.total-h2{
&::before {
content: counter(counter2);
}
}
}
</style>
</head>
<body>
<div class="counter">
<h1>CSS counter example</h1>
<h2>CSS counter Item</h2>
<h2>CSS counter Item</h2>
<h1>CSS counter example</h1>
<h2>CSS counter Item</h2>
<h2>CSS counter Item</h2>
<div class="result">
H1数量:<span class="total-h1"></span>,
H2数量:<span class="total-h2"></span>
</div>
</div>
</body>
</html>
示例效果
4.总结
CSS 计数器浏览器兼容性比较好,可用于显示一个随 HTML 中某些元素递增的值。在很多情况下,这可以完全消除在页面中引入 JavaScript,因此对于不需要交互性的轻量级网络项目来说,这是一个理想的解决方案。但需要注意的是,以这种方式使用 CSS 可能会模糊内容与设计之间的界限,无法将两者分开,从而无法管理大型应用程序。因此,建议在较复杂的 JavaScript 应用程序中应根据实际需要进行评估,减少或者避免使用这种方法。