当前位置： 首页 > news >正文

CSS计数器

news 2026/3/26 19:33:21

CSS 中的计数器类似于变量，可以实现简单的计数功能，并将结果显示在页面上，在早期的网站上应用比较广泛。要实现计数器需要用到以下几个属性：

  • counter-reset：创建或者重置计数器；
  • counter-increment：递增变量；
  • content：插入生成的内容；
  • counter() 或 counters()：将计数器的值添加到元素。

下面我们就来看一下 CSS 中的计数器是如何使用的。

初始化计数器

要使用计数器首先需要使用 counter-reset 属性来创建一个计数器，这一过程便叫做初始化计数器。counter-reset 属性的语法格式如下：

counter-reset：none | [ ]

参数说明如下：

  • none：阻止计数器复位；
  • ：定义计数器的名称；
  • ：定义计数器的起始值，默认值为 0，可以为负值。

计数器自增

初始化计数器后，可以通过 counter-increment 属性来指定计数器何时自增，语法格式如下：

counter-increment：none | [ ]

参数说明如下：

  • none：阻止计数器增加；
  • ：定义要自增的计数器名称；
  • ：定义计数器每次增加的数值，默认值为 1，可以为负值。

显示计数器

最后，就是如何显示计数器了。要显示计数器您可以使用 counter() 或 counters() 函数，这两个函数的语法格式如下：

counter(name)
counters(name, string, list-style-type)

参数说明如下：

  • name：计数器的名称；
  • string：当计数器嵌套使用时，用来拼接的字符串；
  • list-style-type：计数器显示的风格，可以是 CSS 中允许的任何《list-style-type 属性》的值。

下面通过一个简单的示例来演示计数器的使用：

<!DOCTYPE html><html><head><style>body {counter-reset: chapter; }h5, h6 {margin: 5px 0 5px;}h5 {counter-reset: section;counter-increment: chapter;}h6 {counter-increment: section;}h5:before {content: "Chapter " counter(chapter) ". ";}h6:before {content: counter(chapter) "." counter(section) " ";}</style></head><body><h5>程序设计语言</h5><h6>HTML and CSS</h6><h6>JavaScript</h6><h6>PHP</h6><h6>Java</h6><h5>数据库管理系统</h5><h6>MySQL</h6><h6>MariaDB</h6><h6>PostgreSQL</h6><h6>Oracle</h6></body></html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：计数器

注意：在使用 CSS 计数器之前，必须使用 counter-reset 创建计数器。

计数器嵌套

另外，计数器还可以嵌套使用，而且使用 counters() 函数可以在不同级别的嵌套计数器之间插入一个字符串，如下例所示：

<!DOCTYPE html><html><head><style>ol {/* 为每个ol元素创建新的计数器实例 */counter-reset: ol-list;list-style-type: none;}li:before {/* 只增加计数器的当前实例 */counter-increment: ol-list;/* 为所有计数器实例增加以“.”分隔的值 */content: counters(ol-list, ".") "、";}</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></ol></li><li>item<ol><li>item</li><li>item</li><li>item</li></ol></li></ol></li><li>item</li><li>item</li></ol></body></html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：计数器嵌套

通过以上示例我们不难看出，使用 CSS 计数器可以在不借助其它编程语言（例如 JavaScript、PHP
等）的情况下实现简单的计数功能，当需要为某些内容添加序号时非常适用。

原文地址CSS计数器

相关文章：

CSS计数器

CSS 中的计数器类似于变量&#xff0c;可以实现简单的计数功能&#xff0c;并将结果显示在页面上&#xff0c;在早期的网站上应用比较广泛。要实现计数器需要用到以下几个属性&#xff1a; counter-reset&#xff1a;创建或者重置计数器&#xff1b;counter-increment&#xf…...

编程日记 2024/10/11 20:39:21

嵌入式Linux：信号集

目录 1、信号集初始化 2、向信号集中添加或删除信号 3、测试信号是否在信号集中 在 Linux 系统中&#xff0c;处理多个信号时常用到一种数据结构&#xff1a;信号集&#xff08;sigset_t&#xff09;。信号集允许我们将多个信号组织在一起&#xff0c;以便在系统调用中传递和…...

编程日记 2024/10/11 20:38:20

Linux 外设驱动 应用 1 IO口输出

从这里开始外设驱动介绍&#xff0c;这里使用的IMX8的芯片作为驱动介绍 开发流程&#xff1a; 修改设备树&#xff0c;配置 GPIO1_IO07 为 GPIO 输出。使用 sysfs 接口或编写驱动程序控制 GPIO 引脚。编译并测试。 这里假设设备树&#xff0c;已经配置好了。不在论述这个问题…...

编程日记 2024/10/11 20:36:16

基于SpringBoot+Vue+MySQL的留守儿童爱心网站

系统展示 用户前台界面 管理员后台界面 系统背景 随着现代社会的发展&#xff0c;留守儿童问题日益受到关注。传统的纸质管理方式已经无法满足现代人们对留守儿童爱心信息的需求。为了提高留守儿童爱心信息的管理效率&#xff0c;增加用户信息的安全性&#xff0c;并方便及时反…...

编程日记 2024/10/11 20:35:15

调用第三方接口

目录 一、分析给出的接口文档 二、请求体格式之间的区别 三、示例代码 一、分析给出的接口文档 一般的接口文档包括以下几大部分&#xff1a; 1、请求URL&#xff1a;http://{ip}:{port}/api/ec/dev/message/sendCustomMessageSingle 2、请求方式&#xff1a;POST、GET等 3、…...

编程日记 2024/10/11 20:34:13

JAVA 多线程入门例子：CountDownLatch

首先确定线程数量。如果数据集合的大小小于50&#xff0c;就只使用一个线程&#xff1b;否则使用5个线程。计算每个线程平均处理的数据数量sizePerThread以及余数remainder。在划分数据子集合时&#xff0c;对于每个线程的处理范围进行计算。如果有余数&#xff0c;就将余数依次…...

编程日记 2024/10/11 20:30:09

k8s jenkins 动态创建slave

k8s jenkins 动态创建slave 简述使用jenkins动态slave的优势&#xff1a;配置jenkins动态slave配置 Pod Template配置容器模板挂载卷 测试 简述 持续构建与发布是我们日常工作中必不可少的一个步骤&#xff0c;目前大多公司都采用 Jenkins 集群来搭建符合需求的 CI/CD 流程&am…...

编程日记 2024/10/11 20:29:08

MVS海康工业相机达不到标称最大帧率

文章目录 一、相机参数设置1、取消相机帧率限制2、修改相机图像格式3、调整相机曝光时间4、检查相机数据包大小&#xff08;网口相机特有参数&#xff09;5、 恢复相机默认参数6、 相机 ADC 输出位深调整 二、系统环境设置1、 网口相机设置2、 USB 相机设置 一、相机参数设置 …...

编程日记 2024/10/11 20:28:07

数据结构：用双栈实现一个队列

要用两个栈实现一个队列&#xff0c;可以利用“栈”的后进先出 (LIFO) 特性来模拟“队列”的先进先出 (FIFO) 操作。具体做法是使用两个栈&#xff1a;一个作为入栈栈&#xff0c;另一个作为出栈栈。 算法步骤 入队操作&#xff08;enqueue&#xff09;&#xff1a; 将元素压…...

编程日记 2024/10/11 20:26:05

QScroller Class

Header：#include < QScroller > qmake：QT += widgets Since：Qt 5.0 Inherits：QObject This class was introduced in Qt 5.0. Public Types enum Input {InputPress, InputMove, InputRelease } enum ScrollerGestureType {TouchGesture, LeftMouseButtonGesture,…...

编程日记 2024/10/11 20:25:04

React高阶组件详解

React高阶组件&#xff08;HOC&#xff09;详解 定义 React高阶组件&#xff08;HOC&#xff09;是一个函数&#xff0c;该函数接受一个组件作为参数并返回一个新的组件。高阶组件本身不是一个组件&#xff0c;而是一个函数&#xff0c;它利用React的组合特性&#xff0c;对传入…...

编程日记 2024/10/11 20:20:59

TextView把其它控件挤出屏幕的处理办法

1.如果TextView后面的控件是紧挨着TextView的&#xff0c;可以给TextView添加maxWidth限制其最大长度 上有问题的布局代码 <?xml version"1.0" encoding"utf-8"?> <layout xmlns:android"http://schemas.android.com/apk/res/android&qu…...

编程日记 2024/10/11 20:18:57

长度为 K 的重复字符子串数目

长度为 K 的重复字符子串 给你一个由小写字母组成的长度为n的字符串 S &#xff0c;找出所有长度为 k 且包含重复字符的子串&#xff0c;请你返回全部满足要求的子串的数目。 数据范围&#xff1a; 2≤k≤400 , 5≤n≤900 进阶&#xff1a; 时间复杂度O(n)&#xff0c;空间复杂…...

编程日记 2024/10/11 20:17:55

html+css+js实现轮播图

实现效果&#xff1a; HTML部分 <div class"carousel"><div class"carousel-wrapper"><img src"./image/1.png" alt""></div><ul class"carousel-indictor"><li class"active"…...

编程日记 2024/10/11 20:09:46

Boost集成模型异同

一、常见Boost集成模型 AdaBoost、GBDT和XGBoost都是集成学习中的提升&#xff08;Boosting&#xff09;算法&#xff0c;它们通过组合多个弱学习器来构建一个强学习器。从经验上来说&#xff0c;XGBoost是诸多竞赛的大杀器&#xff0c;在实际业务工作中可能需要用到集成模型的…...

编程日记 2024/10/11 20:04:40

【系统架构设计师】案例专题四：嵌入式系统考点梳理

更多内容请见： 备考系统架构设计师-核心总结目录 摘要：本文主要梳理系统架构设计师 - 嵌入式系统 案例考点 ，主要包括嵌入式相关概念、软件和硬件可靠性、冗余技术、软件容错、集群技术、负载均衡、可维护性的评价指标、软件维护的分类等。 文章目录 一、相关概念二、软件可…...

编程日记 2024/10/11 20:03:38

Ngin入门套餐

快速了解Nginx 一、代理1.1 正向代理1.2 反向代理1.3 正向代理和反向代理的区别 二、Nginx负载均衡策略2.1 轮询&#xff08;Round Robin&#xff09;2.2 加权轮询&#xff08;Weighted Round Robin&#xff09;2.3 IP 哈希&#xff08;IP Hash&#xff09;2.4 最少连接&#x…...

编程日记 2024/10/11 20:00:35

使用linux编译main.cpp文件

1、首先创建一个简单的test.cpp&#xff0c;使用终端命令形式&#xff1a; touch test.cpp 创建结束&#xff0c;记得ls一下&#xff0c;如下&#xff1a; 2、找到创建结束的test.cpp文件&#xff0c;然后右键编辑&#xff0c;输入一个简单的代码&#xff0c;如下 #include …...

编程日记 2024/10/11 19:55:30

服务器部署‌Traefik 实现子级域名路由服务（对外子域名80，路由对内大端口）

文章目录 1.‌Traefik安装2.启动nginx配置路由 本文档只是为了留档方便以后工作运维&#xff0c;或者给同事分享文档内容比较简陋命令也不是特别全&#xff0c;不适合小白观看&#xff0c;如有不懂可以私信&#xff0c;上班期间都是在得 前言&#xff0c;领导让我调研在线发布得…...

编程日记 2024/10/11 19:54:29

@RequestParam @PathVirable @RequestBody @ApiParam的区别

RequestParam 最常用用value指定参数名字&#xff0c;required字段指定参数是否必须&#xff0c;默认为true&#xff0c;当requiredfalse时&#xff0c;一般配合着defaultValue"xx"使用对应的url是这样的&#xff1a; https://localhost/requestParam/test?key1va…...

编程日记 2024/10/11 19:53:27

Comsol热流耦合拓扑优化：最大化放热量与功率耗散的探索

Comsol热流耦合拓扑优化。 目标函数采用最大化放热量和功率耗散。在工程领域&#xff0c;热流耦合问题一直是研究的重点&#xff0c;尤其是如何通过拓扑优化来实现特定目标&#xff0c;比如最大化放热量和功率耗散&#xff0c;这对于提高系统性能至关重要。而Comsol作为一款强大…...

编程新知 2026/3/26 18:56:40

情感GDP报告：测试员负面情绪成经济指标的行业变革

一、导言&#xff1a;情感GDP的崛起与测试行业新坐标 2025年全球情感计算市场规模突破596亿元&#xff08;数据来源&#xff1a;2024年情感计算行业报告&#xff09;&#xff0c;"情感GDP"作为衡量情绪价值的经济指标&#xff0c;正重塑职业评价体系。软件测试领域首…...

编程新知 2026/3/26 18:40:38

第10章 RTOS 感知调试（OpenOCD）

第10章 RTOS 感知调试 导读：在嵌入式开发中，RTOS（实时操作系统）的使用非常普遍。然而当多个线程并发执行时，传统的单线程调试方式无法感知任务切换和线程上下文，给问题定位带来极大困难。OpenOCD 内置了对十余种主流 RTOS 的线程感知调试支持，能够在暂停目标时自动识别所…...

编程新知 2026/3/26 17:29:37

从‘跟网’到‘构网’：手把手教你用MATLAB/Simulink搭建虚拟同步机（VSG）仿真模型（附模型下载）

从零构建虚拟同步机&#xff1a;MATLAB/Simulink实战指南 电力电子工程师们正面临一个新时代的挑战——如何让逆变器从被动"跟网"转变为主动"构网"。想象一下&#xff0c;当你第一次在示波器上看到自己搭建的虚拟同步机模型成功响应电网频率波动时&#xf…...

编程新知 2026/3/26 16:49:16

避坑指南：在RV1103B上为SC132GS摄像头添加设备树节点的正确姿势

RV1103B平台SC132GS摄像头设备树配置实战指南 1. 瑞芯微RV1103B平台摄像头开发概述 在嵌入式视觉系统开发中&#xff0c;瑞芯微RV1103B凭借其出色的图像处理能力和低功耗特性&#xff0c;成为工业视觉、智能门铃等场景的热门选择。SC132GS作为一款高性价比的1/3英寸CMOS传感器&…...

编程新知 2026/3/26 16:14:54

如何快速解放双手：MaaYuan游戏日常任务自动化完整指南

如何快速解放双手&#xff1a;MaaYuan游戏日常任务自动化完整指南 【免费下载链接】MaaYuan 代号鸢 / 如鸢 一键长草小助手 项目地址: https://gitcode.com/gh_mirrors/ma/MaaYuan 厌倦了每天花费大量时间在重复的游戏日常任务上吗&#xff1f;MaaYuan作为一款免费开源的…...

编程新知 2026/3/26 15:17:59

基于Vue的博物馆智能导览系统[vue]-计算机毕业设计源码+LW文档

摘要&#xff1a;本文介绍了一款基于Vue框架开发的博物馆智能导览系统。系统旨在利用现代Web技术提升参观者在博物馆中的体验&#xff0c;通过提供便捷的博物馆信息查询、个性化的导览路线规划等功能&#xff0c;满足不同用户的需求。本文详细阐述了系统的开发背景、相关技术、…...

编程新知 2026/3/26 15:09:57

Qwen3-0.6B-FP8在.NET生态中的集成应用：开发C#客户端调用库

Qwen3-0.6B-FP8在.NET生态中的集成应用&#xff1a;开发C#客户端调用库 最近在捣鼓一些AI模型&#xff0c;发现Qwen3-0.6B-FP8这个轻量级模型挺有意思的&#xff0c;推理速度快&#xff0c;资源占用少&#xff0c;特别适合在本地或者边缘设备上跑。不过&#xff0c;作为一个.N…...

编程新知 2026/3/26 14:05:15

通义千问多模态检索系统：图文视频混合输入全解析

通义千问多模态检索系统&#xff1a;图文视频混合输入全解析 1. 多模态检索的行业痛点与解决方案 在信息爆炸的时代&#xff0c;传统文本检索系统面临三大核心挑战&#xff1a; 跨模态匹配失效&#xff1a;用户用文字描述"红色跑车在沙漠驰骋"&#xff0c;系统却返…...

编程新知 2026/3/26 13:26:57

ZeroOmega代理规则引擎：构建智能化网络访问策略

ZeroOmega代理规则引擎&#xff1a;构建智能化网络访问策略 【免费下载链接】ZeroOmega Manage and switch between multiple proxies quickly & easily. 项目地址: https://gitcode.com/gh_mirrors/ze/ZeroOmega 在数字化生活中&#xff0c;我们每天都在与各种网络…...

编程新知 2026/3/26 12:24:32