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

CSS计数器

news 2025/9/6 13:41:03

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

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/7/7 5:39:43

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

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

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

编程新知 2025/8/19 5:37:33

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/8/30 16:34:33

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/6/25 2:48:04

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/9/3 21:20:28

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/8/28 16:54:43

Kafka主题运维全指南：从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

编程新知 2025/6/10 21:14:43

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/9/5 10:51:32

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API&#xff0c;让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API&#xff0c;你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...

编程新知 2025/7/8 0:22:23