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

CSS计数器

news 2026/2/9 15:04:26

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

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2026/1/26 21:57:45

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2026/2/4 12:52:32

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2026/1/23 7:56:54

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/31 13:13:28

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2026/1/29 2:11:49

消防一体化安全管控平台：构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

编程新知 2026/2/6 5:47:08