css如何动态累计数字?

导读:css如何动态累计数字?用于章节目录的序列数生成,用css的计数器实现起来比 js方式更简单!

伪元素

::after ::before伪元素设置content 可以在元素的首部和尾部添加内容,我们要在元素的首部添加序列号,所以要用到的是::before的content 属性

计数器

counter-reset 初始化或重置计数器的值;

格式:
counter-reset: 计数器的名字 [可选,计数器初始值]

counter-reset: chapter;   /*初始化 默认初始值为0*/
counter-reset: chapter 1; /*初始化 初始值为1*/
counter-reset: chapter item mini; /*初始化多个计数器*/

counter-increment 计数器累加;

格式:
counter-increment: 计数器的名字 [可选,计数器增量值]

counter-increment: chapter; /*累加,默认增量为 1*/
counter-increment: chapter 2; /*累加,增量为 2 */

counter() 计数器累计;

格式:
counter(计数器的名字, [可选type,同list-style-type])

.chapter h2::before {content: counter(chapter, cjk-ideographic); /*第一个参数计数器的名字,必须与counter-reset和counter-increment中计数器的名字一致*/}

简单示例:

一个计数器运用:chapter

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {counter-reset: chapter;}ul {margin: 20px;padding: 0;}ul li {list-style-type: none;padding: 2px 0px;}.chapter {counter-reset: item;counter-increment: chapter;}.chapter h2::before {content: '第' counter(chapter, cjk-ideographic) '章、';}</style></head><body><div class="chapter"><h2>章节内容</h2><ul class="sendSeq"><li>段落内容<ul class="mini"><li>项目小结</li><li>项目小结</li></ul></li><li>段落内容</li><li>段落内容</li></ul></div><div class="chapter"><h2>章节内容</h2><ul class="sendSeq"><li>段落内容<ul class="mini"><li>项目小结</li><li>项目小结</li></ul></li><li>段落内容</li><li>段落内容</li></ul></div></body>
</html>
多个计数器运用:chapter item mini

在这里插入图片描述

 <style>body {counter-reset: chapter item mini;}ul {margin: 20px;padding: 0;}ul li {list-style-type: none;padding: 2px 0px;}.chapter {counter-reset: item;counter-increment: chapter;}.chapter h2::before {content: '第' counter(chapter, cjk-ideographic) '章、';}.sendSeq li {font-size: 18px;counter-increment: item;}.sendSeq li::before {content: counter(chapter) '.' counter(item) ' ';}.mini {counter-reset: mini;}.mini li {font-size: 14px;counter-increment: mini;}.mini li::before {content: counter(chapter) '.' counter(item) '.' counter(mini) ' ';}</style>

补充: list-style-type 属性值

描述
none无标记。
disc默认。标记是实心圆。
circle标记是空心圆。
square标记是实心方块。
decimal标记是数字。(1,2,3,4,等。)
decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)
lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek小写希腊字母(alpha, beta, gamma, 等。)
lower-latin小写拉丁字母(a, b, c, d, e, 等。)
upper-latin大写拉丁字母(A, B, C, D, E, 等。)
hebrew传统的希伯来编号方式
armenian传统的亚美尼亚编号方式
georgian传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic简单的表意数字 (一,二,三,四,等。)
hiragana标记是:a, i, u, e, o, ka, ki, 等。(日文平假名字符)
katakana标记是:A, I, U, E, O, KA, KI, 等。(日文片假名字符)
hiragana-iroha标记是:i, ro, ha, ni, ho, he, to, 等。(日文平假名序号)
katakana-iroha标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名序号)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/30051.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NUC 14 Pro+:解锁AI前沿,体验科技之美

NUC 14 Pro不仅是一台迷你主机&#xff0c;更是生活品质的体现。如果你也是细节控&#xff0c;那这篇文章或许是你需要的。 超小体积 造型精致 NUC 14 Pro作为迷你PC拥有约0.66L的超小体积&#xff0c;如果你对升没有概念&#xff0c;那你可以想象&#xff1a;它的机箱面积144…

ChatGLM:A Family of Large Language Models from GLM-130B to GLM-4 All Tools

ChatGLM: A Family of Large Language Models from GLM-130B to GLM-4 All Tools 相关链接&#xff1a;arxiv 关键字&#xff1a;Large Language Models、GLM、Transformer、Post-training Alignment、Multi-language 摘要 本文介绍了ChatGLM&#xff0c;这是一个不断发展的大…

聚四氟乙烯提取瓶2L固废浸提用PTFE大口瓶适配FZ-4翻转震荡器

聚四氟乙烯广口瓶的口径较大&#xff0c;我司采用“直上直下”的样式设计&#xff0c;方便样品的存放和拿取。瓶身内壁平滑&#xff0c;&#xff0c;易清洗。瓶口是螺纹口设计&#xff0c;保证很好的密封性。聚四氟乙烯广口瓶特性&#xff1a;1.耐高低温&#xff1a;-200至250℃…

RIP与OSPF发布默认路由(华为)

#交换设备 RIP与OSPF发布默认路由 合理使用默认路由可以很大程度上减少本地路由表的大小&#xff0c;并可以较好的隐藏一个网络中的路由信息&#xff0c;保护自身网络的隐秘性 另外如果在同一个路由器两端使用了不同的路由协议&#xff0c;那么如果不做路由引入或者发布默认…

破除“数据孤岛”新策略:Data Fabric(数据编织)和逻辑数据平台

今天&#xff0c;我们已经进入到一个数据爆发的时代&#xff0c;仅 2022 年&#xff0c;我国数据产量就高达 8.1ZB&#xff0c;同比增长 22.7%&#xff0c;数据产量位居世界第二。数据作为新型生产资料&#xff0c;是企业数智化运营的基础&#xff0c;已快速融入到生产、分配、…

文件系统实验(操作系统)

文件系统实验 【预备知识】 1.文件系统的文件类型 为了便于用户利用终端进行输入和输出&#xff0c;UNIX系统做了专门安排。UNIX系统自动为用户打开3个文件&#xff1a;标准输入、标准输出和标准错误输出文件&#xff0c;文件描述符分别为0、1、2&#xff0c;缺省时&#xff0c…

C语言实现五子棋教程

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

BFS 1块、算多少次

目录 1.矩阵内部的1块 2.从1开始&#xff0c;1或乘2&#xff0c;计算要多少次达到n 3.迷宫路径 1.矩阵内部的1块 #include <iostream> #include <vector> #include <cmath> #include <string> #include <cstring> #include <queue> usi…

警惕!新增4本SCI/SSCI被剔除!6月WOS更新(附下载)

本周投稿推荐 SSCI • 中科院2区&#xff0c;6.0-7.0&#xff08;录用友好&#xff09; EI • 各领域沾边均可&#xff08;2天录用&#xff09; CNKI • 7天录用-检索&#xff08;急录友好&#xff09; SCI&EI • 4区生物医学类&#xff0c;0.5-1.0&#xff08;录用…

入侵检测系统(IDS)

入侵检测 入侵检测&#xff08;Intrusion Detection&#xff09;是指发现或确定入侵行为存在或出现的动作&#xff0c;也就是发现、跟踪并记录计算机系统或计算机网络中的非授权行为&#xff0c;或发现并调查系统中可能为视图入侵或病毒感染所带来的异常活动。 入侵检测系统 …

neo4j 3.5.5版本创建新的数据库

neo4j 3.5.5版本创建新的数据库 1.找到neo4j的conf文件 点进去 2.点击neo4j.conf 选择记事本打开 3.把graph.db换成自己想要创建的数据库名称 4.打开neo4j服务 出现新的数据库

System.Data.OracleClient.OracleException:“ORA-12571: TNS: 包写入程序失败

System.Data.OracleClient.OracleException:“ORA-12571: TNS: 包写入程序失败 解决方法&#xff1a; 首先%oracle_home%/network/admin下的sqlnet.ora文件&#xff0c;把SQLNET.AUTHENTICATION_SERVICES (NTS)加个 # 注释掉就好了

不收费的视频转文字软件有那些?4款视频转文字工具让你效率翻倍!

​视频转文字&#xff0c;也称为视频字幕生成或视频语音识别&#xff0c;是一种将视频中的语音内容转换成文字的技术。视频转文字真的不同的人群所用的工具有所差异&#xff01; 以下是三款免费的在线视频转文字工具推荐&#xff1a; 1&#xff1a;剪映 主要针对人视频制作人…

移植案例与原理 - XTS子系统之应用兼容性测试套件(1)

本文主要通过实例分析下ACTS应用兼容性测试套件移植案例&#xff0c;以及移植过程中特定的操作的原理。主要讲述的是轻量系统兼容性测试。轻量系统因系统能力限制&#xff0c;兼容性测试在系统初始化阶段进行&#xff1b;并且各设备烧录工具存在差异&#xff0c;导致自动化工具…

第二证券股市资讯:昨夜!全球新“股王”诞生

昨晚&#xff0c;英伟达成全球市值榜首公司。 当地时间6月18日&#xff0c;美股三大指数小幅收高&#xff0c;标普500指数与纳指再创前史新高。标普500指数涨0.25%&#xff0c;道指涨0.15%&#xff0c;纳指涨0.03%。 AI热潮推动英伟达大涨&#xff0c;市值逾越微软、苹果&…

【实战】Spring Cloud Stream 3.1+整合Kafka

文章目录 前言新版版本优势实战演示增加maven依赖增加applicaiton.yaml配置新增Kafka通道消费者新增发送消息的接口 实战测试postman发送一个正常的消息postman发送异常消息 前言 之前我们已经整合过Spring Cloud Stream 3.0版本与Kafka、RabbitMQ中间件&#xff0c;简直不要太…

华为鸿蒙 使用router跳转页面 和 router.getParams接收参数并使用参数 [最简单 最直接 的详细教程 ]

1, 准备两个页面 1. pages/DetailPage.ets 2. pages/Index.ets 2, 代码直接 cv 页面 // pages/Index.ets import router from ohos.router// 参数类型 class User {name: stringage: number }Entry Component struct Index {// 要传的参数Stateuser: User {name: John,…

【解决方案】Java 互联网项目中消息通知系统的设计与实现

前言 消息通知系统&#xff08;notification-system&#xff09;作为一个独立的微服务&#xff0c;完整地负责了 App 端内所有消息通知相关的后端功能实现。该系统既需要与文章系统、订单系统、会员系统等相关联&#xff0c;也需要和其它业务系统相关联&#xff0c;是一个偏底层…

docker-compose设置永久启动、自动重启

步骤一 找到 docker-compose.yml 文件 步骤二 vim 打开文件 找到 image: PS&#xff1a;就是为了对齐格式 步骤三 在其下方添加&#xff1a; restart: always而后保存即可

注意力机制简介

为了减少计算复杂度&#xff0c;通过借鉴生物神经网络的一些机制&#xff0c;我们引入了局部连接、权重共享以及汇聚操作来简化神经网络结构。神经网络中可以存储的信息量称为网络容量。一般来讲&#xff0c;利用一组神经元来存储信息的容量和神经元的数量以及网络的复杂度成正…