其他
现代CSS：CSS 计数器应用综合指南
大家好，今天是我坚持日更的第110天。相信坚持的力量！文章末尾有惊喜推荐，欢迎点赞关注。
在程序设计中，计数器是一种变量，它保存的数值会根据可定制的规则递增。计数器有很多用途，例如通过存储循环的执行次数来帮助跟踪循环。虽然计数器在编程语言中经常使用，但在层叠样式表（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 应用程序中应根据实际需要进行评估，减少或者避免使用这种方法。
大家都在看