CSS计数器完全指南
小白也能理解的CSS计数器知识大全
CSS计数器是一种不使用JavaScript就能实现自动编号的强大工具！本指南将用通俗易懂的语言介绍所有核心知识点。
什么是CSS计数器？
想象CSS计数器就像现实生活中的计数器：
它能在网页上创建一个”隐形计数器”，每当浏览器遇到特定元素（如标题或列表项）时自动增加计数，然后可以在需要的地方显示这个数字。
优点：
- 纯CSS实现，不需要JavaScript
- 自动增加计数，无需手动维护
- 可以通过CSS自定义样式和样式
- 支持嵌套多级计数器
计数器使用三步法
1
初始化计数器
使用 counter-reset 创建一个新计数器并设置初始值（默认为0）
body {
counter-reset: section; /* 创建名为section的计数器 */
}2
递增计数器
使用 counter-increment 在元素出现时增加计数器的值
h2 {
counter-increment: section; /* 每次遇到h2，section计数器+1 */
}3
显示计数器
使用 content 和 counter() 函数显示计数器值
h2::before {
content: "章节 " counter(section) ": ";
color: #e74c3c;
}实际效果：
CSS基础知识
学习选择器、盒模型等基础概念
布局技术
Flexbox和Grid布局详解
动画效果
使用transition和animation创建动态效果
计数器嵌套使用
CSS计数器支持多级嵌套，非常适合创建文档大纲：
/* 初始化父级和子级计数器 */
body {
counter-reset: chapter;
}
h2 {
counter-increment: chapter;
counter-reset: section; /* 每次h2出现时，重置section计数器 */
}
h3 {
counter-increment: section;
}
h2::before {
content: "第" counter(chapter) "章：";
}
h3::before {
content: counter(chapter) "." counter(section) " ";
}自定义计数器样式
使用 counter() 函数的第二个参数指定样式：
/* 使用小写罗马数字 */
ol {
counter-reset: my-counter;
list-style: none;
}
li {
counter-increment: my-counter;
}
li::before {
content: counter(my-counter, lower-roman) ". ";
}支持样式：
decimal– 默认数字 (1, 2, 3…)lower-roman– 小写罗马数字 (i, ii, iii…)upper-roman– 大写罗马数字 (I, II, III…)lower-alpha– 小写字母 (a, b, c…)upper-alpha– 大写字母 (A, B, C…)lower-greek– 希腊字母- 以及其他列表样式类型
计数器的作用域
计数器的作用域很重要：
每个计数器都在定义它的元素及其子元素中有效。嵌套元素中可以使用相同名称的计数器而不会冲突。
div.container {
counter-reset: item;
}
/* 每个div.item内部创建独立计数器 */
div.item {
counter-reset: item;
}
div.item h3 {
counter-increment: item;
}