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

CSS计数器

news 2026/2/9 7:06:02

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

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/9/24 16:02:40

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2026/1/26 4:49:33

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2026/1/20 5:33:17

在 Spring Boot 项目里，MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

编程新知 2025/7/9 16:55:37

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

编程新知 2026/2/4 3:31:19

若依登录用户名和密码加密

/*** 获取公钥&#xff1a;前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...

编程新知 2026/1/22 11:27:07