CSS Counters 计数器-代码号

CSS Counters 详解：自动计数与编号系统

属性概述

CSS Counters（计数器）是一种类似于变量的功能，由 CSS 维护和管理。通过 CSS 规则可以递增这些值，用于跟踪元素的使用次数。CSS 计数器提供了基于 CSS 的简单递增功能，并在生成内容中显示数字编号。

计数器相关属性

counter-reset

功能：创建或重置计数器
语法：counter-reset: counter-name initial-value;
说明：必需使用此属性创建计数器

counter-increment

功能：递增计数器值
语法：counter-increment: counter-name increment-value;
说明：每次调用时增加计数器的值

content

功能：插入生成内容
语法：content: counter(counter-name);
说明：用于显示计数器的当前值

counter() / counters() 函数

功能：将计数器的值添加到元素中
区别：counter() 用于单层计数，counters() 用于嵌套计数

基础计数器示例

<!DOCTYPE html>
<html>
<head>
    <title>CSS计数器基础 - 代码号编程教程</title>
    <style>
        /* 创建章节计数器 */
        body {
            counter-reset: chapter;
        }
        
        /* 在每个h2前递增并显示计数器 */
        h2::before {
            counter-increment: chapter;
            content: "第" counter(chapter) "章：";
            color: #2196F3;
            font-weight: bold;
        }
        
        .tutorial-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-family: "Microsoft YaHei", sans-serif;
        }
    </style>
</head>
<body>
    <div class="tutorial-container">
        <h1>代码号前端开发教程目录</h1>
        <h2>HTML5基础入门</h2>
        <h2>CSS3样式设计</h2>
        <h2>JavaScript编程精要</h2>
        <h2>响应式布局实战</h2>
        <h2>前端框架应用</h2>
    </div>
</body>
</html>

嵌套计数器系统

<!DOCTYPE html>
<html>
<head>
    <title>嵌套计数器 - 代码号课程体系</title>
    <style>
        /* 重置主计数器 */
        body {
            counter-reset: course;
        }
        
        /* 为每个课程大类重置子计数器 */
        h1 {
            counter-reset: lesson;
        }
        
        /* 课程大类编号 */
        h1::before {
            counter-increment: course;
            content: "课程" counter(course) "：";
            color: #E91E63;
        }
        
        /* 课程小节编号 */
        h2::before {
            counter-increment: lesson;
            content: counter(course) "." counter(lesson) " ";
            color: #4CAF50;
            font-weight: bold;
        }
        
        .course-system {
            max-width: 900px;
            margin: 0 auto;
            padding: 30px;
            background-color: #f8f9fa;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="course-system">
        <h1>前端开发技术栈</h1>
        <h2>HTML5语义化标签</h2>
        <h2>CSS3动画效果</h2>
        <h2>ES6新特性</h2>
        <h2>Vue.js框架基础</h2>
        
        <h1>后端开发技术栈</h1>
        <h2>Node.js入门</h2>
        <h2>Express框架</h2>
        <h2>数据库操作</h2>
        <h2>RESTful API设计</h2>
        
        <h1>移动端开发</h1>
        <h2>React Native基础</h2>
        <h2>Flutter入门</h2>
        <h2>混合开发技术</h2>
    </div>
</body>
</html>

多级嵌套列表计数

<!DOCTYPE html>
<html>
<head>
    <title>多级嵌套计数 - 代码号知识体系</title>
    <style>
        /* 移除默认列表样式 */
        .knowledge-tree {
            counter-reset: level1;
            list-style-type: none;
            padding-left: 20px;
        }
        
        /* 第一级计数 */
        .level1 > li::before {
            counter-increment: level1;
            content: counters(level1, ".") " ";
            font-weight: bold;
            color: #2196F3;
        }
        
        /* 第二级计数 */
        .level2 {
            counter-reset: level2;
            padding-left: 30px;
        }
        
        .level2 > li::before {
            counter-increment: level2;
            content: counters(level1, ".") "." counters(level2, ".") " ";
            color: #4CAF50;
        }
        
        /* 第三级计数 */
        .level3 {
            counter-reset: level3;
            padding-left: 40px;
        }
        
        .level3 > li::before {
            counter-increment: level3;
            content: counters(level1, ".") "." counters(level2, ".") "." counters(level3, ".") " ";
            color: #FF9800;
        }
        
        .tree-container {
            max-width: 800px;
            margin: 40px auto;
            padding: 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            color: white;
        }
        
        .tree-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 28px;
        }
    </style>
</head>
<body>
    <div class="tree-container">
        <h2 class="tree-title">代码号Web开发知识体系</h2>
        
        <ol class="knowledge-tree level1">
            <li>前端技术
                <ol class="level2">
                    <li>HTML/CSS
                        <ol class="level3">
                            <li>语义化标签</li>
                            <li>Flex布局</li>
                            <li>Grid布局</li>
                        </ol>
                    </li>
                    <li>JavaScript
                        <ol class="level3">
                            <li>ES6语法</li>
                            <li>DOM操作</li>
                            <li>异步编程</li>
                        </ol>
                    </li>
                </ol>
            </li>
            <li>后端技术
                <ol class="level2">
                    <li>Node.js
                        <ol class="level3">
                            <li>Express框架</li>
                            <li>中间件机制</li>
                            <li>路由设计</li>
                        </ol>
                    </li>
                    <li>数据库
                        <ol class="level3">
                            <li>MongoDB</li>
                            <li>MySQL</li>
                            <li>Redis</li>
                        </ol>
                    </li>
                </ol>
            </li>
            <li>开发工具
                <ol class="level2">
                    <li>版本控制
                        <ol class="level3">
                            <li>Git基础</li>
                            <li>GitHub使用</li>
                            <li>分支管理</li>
                        </ol>
                    </li>
                    <li>构建工具
                        <ol class="level3">
                            <li>Webpack配置</li>
                            <li>Babel转译</li>
                            <li>Vite使用</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </div>
</body>
</html>

实用应用场景

教程步骤计数器

<!DOCTYPE html>
<html>
<head>
    <title>教程步骤计数 - 代码号实操指南</title>
    <style>
        .tutorial-steps {
            counter-reset: step;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .step {
            margin: 25px 0;
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border-left: 4px solid #2196F3;
        }
        
        .step::before {
            counter-increment: step;
            content: "步骤" counter(step) "：";
            display: block;
            font-weight: bold;
            color: #2196F3;
            margin-bottom: 10px;
            font-size: 18px;
        }
        
        .step-content {
            color: #333;
            line-height: 1.6;
        }
        
        .important {
            background: #FFF3E0;
            border-left-color: #FF9800;
        }
        
        .important::before {
            color: #FF9800;
        }
    </style>
</head>
<body>
    <div class="tutorial-steps">
        <div class="step">
            <div class="step-content">
                访问代码号官网(https://www.ebingou.cn/)，注册开发者账号
            </div>
        </div>
        
        <div class="step">
            <div class="step-content">
                进入教程中心(https://www.ebingou.cn/jiaocheng/)，选择前端开发课程
            </div>
        </div>
        
        <div class="step important">
            <div class="step-content">
                下载课程源码(https://www.ebingou.cn/yuanma/)，按照文档进行环境配置
            </div>
        </div>
        
        <div class="step">
            <div class="step-content">
                完成每个章节的实践练习，提交代码到编程平台
            </div>
        </div>
        
        <div class="step">
            <div class="step-content">
                参与社区讨论，获取代码审核和优化建议
            </div>
        </div>
    </div>
</body>
</html>

代码示例编号

<!DOCTYPE html>
<html>
<head>
    <title>代码示例编号 - 代码号编程实践</title>
    <style>
        .code-examples {
            counter-reset: example;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        
        .example {
            margin: 20px 0;
            padding: 15px;
            background: #263238;
            color: #EEFFFF;
            border-radius: 5px;
            position: relative;
        }
        
        .example::before {
            counter-increment: example;
            content: "示例" counter(example) "：";
            display: block;
            color: #82AAFF;
            margin-bottom: 10px;
            font-weight: bold;
        }
        
        .code {
            color: #C3E88D;
            white-space: pre-wrap;
            line-height: 1.5;
        }
        
        .comment {
            color: #546E7A;
        }
    </style>
</head>
<body>
    <div class="code-examples">
        <div class="example">
            <div class="code">// HTML结构示例
&lt;div class="container"&gt;
    &lt;h1&gt;欢迎学习编程&lt;/h1&gt;
    &lt;p&gt;代码号提供优质教程&lt;/p&gt;
&lt;/div&gt;</div>
        </div>
        
        <div class="example">
            <div class="code">/* CSS样式示例 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    color: #2196F3;
    text-align: center;
}</div>
        </div>
        
        <div class="example">
            <div class="code">// JavaScript交互示例
document.addEventListener('DOMContentLoaded', function() {
    console.log('页面加载完成');
    <span class="comment">// 更多交互代码...</span>
});</div>
        </div>
    </div>
</body>
</html>

本节课程知识要点

计数器初始化：必须先用 counter-reset 创建计数器
值递增机制：counter-increment 用于增加计数器值
内容生成：通过 content 属性和 counter() 函数显示计数
嵌套计数：使用 counters() 函数实现多级编号系统
作用域特性：计数器具有作用域，可在不同层级重置
应用场景：适合目录编号、步骤指示、代码示例编号等场景

浏览器兼容性

CSS Counters 得到所有现代浏览器的良好支持：

Chrome 2+
Firefox 1.5+
Safari 3+
Edge 12+
Opera 9.2+

总结

CSS Counters 为 Web 开发提供了强大的自动编号能力，无需 JavaScript 即可实现复杂的计数和编号系统。通过合理运用计数器属性，可以创建出结构清晰、层次分明的文档结构和导航系统。

本文标签：

CSS Counters 计数器