CSS content 计数器

CSS content 计数器

CSS 计数器通过一个变量来设置,根据规则递增变量。

使用计数器自动编号

CSS 计数器根据规则来递增变量。

CSS 计数器使用到以下几个属性:

  • counter-reset - 创建或者重置计数器,给计算器命名。注意声明计算器不能在自身使用计数器的标签声明,要在父级或者在前的兄弟元素上声明才可以
  • counter-increment - 递增变量,设置计算器的递增值,
  • content - 插入生成的内容
  • counter()counters() 函数 - 将计数器的值(名称)添加到元素

要使用 CSS 计数器,得先用 counter-reset 创建:

以下实例在页面创建一个计数器 (在 body 选择器中),每个 h2元素的计数值都会递增,并在每个 h2 元素前添加 “Section <计数值>:”

属性描述
content使用 ::before 和 ::after 伪元素来插入自动生成的内容
counter-increment递增一个或多个值
counter-reset创建或重置一个或多个计数器

1. counter-reset

该属性定义计数器的名称,可以同时定义多个计数器,定义数字时代表初始值,缺省默认为0:

div.count{counter-reset: count1 count2;
}
/* count1 和 count2 是计数器名称 自定义命名*/

如上代码定义两个计数器count1和count2,初始默认为0。

2. counter-increment

该属性接收两个参数,第一个参数代表计数器的名称,第二个代表每次递增的值,缺省时默认为1

div.count:before{counter-increment: count1 2;
}

此行代码定义计数器count1单次自增值为,此时计数器默认初始值为0+2=2;若这里将数字2缺省,则默认自增值为1,此时计数器初始值为0+1=1。

  1. counter()/counters()

该方法为计数器调用方法,接收两个参数,第一个参数为计数器名称,第二个为数值类型

计数器使用案例

  1. 基础计数案例
    在这里插入图片描述
<!doctype html>
<html>
<head><meta charset="utf-8"><title>counter&content</title><style>* {margin: 0;padding: 0;}body {/* counter-reset在父级设置计数器变量 */counter-reset: count;}p:before {/*counter-increment设置计数器的步长: 计数器名称 步长*/counter-increment: count 2;/* counter()使用计数器 */content: counter(count);}</style>
</head><body><p>个盒子</p><p>个盒子</p><p>个盒子</p><p>个盒子</p><p>个盒子</p><p>个盒子</p><p>个盒子</p><p>个盒子</p>
</body>
</html>
  1. 智能识别分段计数

在这里插入图片描述

<!doctype html>
<html>
<head><meta charset="utf-8"><title>counter&content</title><style>html {counter-reset: section;}h2 {counter-reset: subsection;}h2:before {counter-increment: section 1;content: '第'counter(section) '篇 ''花'}p:before {counter-increment: subsection 1;/* 比较智能可以识别分段 */content: '第'counter(section) '篇的第'counter(subsection) '段 '}</style>
</head>
<body><h2>标题一 </h2><p>标题一的内容1</p><p>标题一的内容2</p><p>标题一的内容3</p><h2>标题二</h2><p>标题二的内容1</p><p>标题二的内容2</p><p>标题二的内容3</p>
</body>
</html>

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

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

相关文章

孕产妇(产科)管理信息系统源码 三甲医院产科电子病历系统成品源代码

孕产妇&#xff08;产科&#xff09;管理信息系统源码 三甲医院产科电子病历系统成品源代码 医院智慧孕产是一种通过信息化手段,实现孕产期宣教、健康服务的院外延伸,对孕产妇健康管理具有重要意义,是医院智慧服务水平和能力的体现。实行涵盖婚前检查、孕期保健、产后康复的一…

google Guava组件实现原理和Java使用场景【主要是本地缓存Cache】

Java Guava组件介绍 Guava是Google开发的一个Java核心库,旨在提供高质量、高效率的基本工具类和数据结构,以简化Java编程。它扩展了Java标准库,并提供了许多有用的功能,特别适用于处理集合、缓存、并发等方面的应用程序。以下是对Guava的详细介绍。 作用 Guava提供了丰富…

如何把harmonos项目修改为openharmony项目

一开始分不清harmonyos和openharmony&#xff0c;在harmonyos直接下载的开发软件&#xff0c;后面发现不对劲&#xff0c;打脑阔 首先你要安装对应版本的开发软件&#xff0c;鸿蒙开发是由harmonyos和openharmony官网两个的&#xff0c;找到对应的地方下载对应版本的开发软件&…

C#-反射

一、概念 反射&#xff08;Reflection&#xff09;在C#中是一种非常重要的特性&#xff0c;它为开发者提供了在运行时获取和操作关于类型、成员、属性、方法等的详细信息的能力。通过反射&#xff0c;开发者可以在程序运行期间动态地创建对象、调用方法、设置属性值以及进行其…

uniapp 请求封装

1.创建request.js文件 export default {config: {baseUrl: "http://192.168.1.1:0000", // 示例header: {Content-Type: application/json;charsetUTF-8// Content-Type: application/x-www-form-urlencoded, },data: {},method: "GET",dataType: "j…

【Java开发实训】day01

目录 1.Java开发步骤 2.目录的三个表达方法 3.Java的三种注释方法 4.文档注释的作用 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Filotimo__✍️原创&#xff0c;首发于CSDN&…

不要卷模型,要卷应用:大数据领域的深度探讨

引言 在2024年世界人工智能大会上&#xff0c;百度创始人李彦宏提出了“不要卷模型&#xff0c;要卷应用”的观点&#xff0c;这一观点引发了业内的广泛讨论。作为一个在计算机大数据行业深耕多年的专家&#xff0c;我深感这一观点的深刻内涵。本文将从大数据领域的专业视角&a…

Qt QSettings 使用详解:跨平台的配置管理

文章目录 Qt QSettings 使用详解:跨平台的配置管理一、QSettings 概述1. QSettings 的基本使用二、不同平台上的实现1. Windows 平台注册表存储INI 文件存储2. Linux 平台3. macOS 平台三、QSettings 高级用法1. 使用组管理设置2. 检查和移除设置3. 枚举键四、总结Qt QSetting…

运维锅总详解数据一致性

本文首先对数据一致性进行简要说明&#xff0c;然后画图分析展示9种数据一致性协议的工作流程&#xff0c;最后给出实现这9种协议的例子。希望对您理解数据一致性有所帮助&#xff01; 一、数据一致性简介 数据一致性是数据库和分布式系统中的一个关键概念&#xff0c;它确保…

【Mac】Folder Icons for mac(文件夹个性化图标修改软件)软件介绍

软件介绍 Folder Icons for Mac 是一款专为 macOS 设计的应用程序&#xff0c;主要用于个性化和定制你的文件夹图标。以下是它的主要特点和使用方法&#xff1a; 主要特点&#xff1a; 个性化文件夹图标 Folder Icons for Mac 允许用户为 macOS 上的任何文件夹定制图标。你…

怎样优化 PostgreSQL 中对布尔类型数据的查询?

文章目录 一、索引的合理使用1. 常规 B-tree 索引2. 部分索引 二、查询编写技巧1. 避免不必要的类型转换2. 逻辑表达式的优化 三、表结构设计1. 避免过度细分的布尔列2. 规范化与反规范化 四、数据分布与分区1. 数据分布的考虑2. 表分区 五、数据库参数调整1. 相关配置参数2. 定…

融云入驻首个数字生态出海基地,加速构建数字经济出海创新生态

7 月 3 日&#xff0c;“2024 全球数字经济大会”重要专题论坛“2024 数字生态出海发展论坛”在北京国家会议中心举行。 论坛由全球数字经济大会组委会主办&#xff0c;北京市经济和信息化局、北京市政务服务和数据管理局、大兴区人民政府共同承办。来自阿联酋、日本、古巴、…

Chain-of-Verification Reduces Hallucination in Lagrge Language Models阅读笔记

来来来&#xff0c;继续读文章了&#xff0c;今天这个是meta的研究员们做的一个关于如何减少LLM得出幻觉信息的工作&#xff0c;23年底发表。文章链接&#xff1a;https://arxiv.org/abs/2309.11495 首先&#xff0c;这个工作所面向的LLM的问答任务&#xff0c;是list-based q…

静态网页基础知识

1、获取输入框的输入值 var x document.getElementById(userInput).value 赋值的话&#xff1a;document.getElementById(userInput).value 1 2、获取td的值、span的值等一个区域的值 var x document.getElementById(result).innerText 赋值&#xff1a;document.getEl…

动态粒子发射特效404网站HTML源码

源码介绍 动态粒子发射404网站HTML源码&#xff0c;粒子内容可以进行修改&#xff0c;默认是4&#xff0c;0数字还有一个页面不存在英文&#xff0c;可以自行修改&#xff0c;喜欢的朋友可以拿去使用&#xff0c;源码是html&#xff0c;记事本打开修改即可&#xff0c;鼠标双击…

线程池的合理使用

线程池的合理使用 一、简介二、为什么要使用线程池三、核心参数四、如何合理配置线程参数1.1 corePoolSize && maximumPoolSize1.2 Handler 拒绝策略1.2.1AbortPolicy&#xff1a;优势&#xff1a;劣势&#xff1a; 1.2.2 DiscardPolicy&#xff1a;优势&#xff1a;劣…

海外媒体发稿-全媒体百科

全球知名媒体机构 在全球范围内&#xff0c;有许多知名的新闻机构负责报道世界各地的新闻事件。以下是一些国外常见的媒体机构&#xff1a; AP&#xff08;美联社&#xff09;合众国际社&#xff08;UPI&#xff09;AFP(法新社)EFE&#xff08;埃菲通讯社&#xff09;Europa …

521. 最长特殊序列 Ⅰ

521. 最长特殊序列 Ⅰ 题目链接&#xff1a;521. 最长特殊序列 Ⅰ 代码如下&#xff1a; class Solution { public:int findLUSlength(string a, string b) {if(ab) {return -1;}return max(a.size(),b.size());} };

VUE + 小程序 关于前端循环上传附件页面卡死的问题

最开始我使用for循环&#xff0c;后端能正常保存&#xff0c;但是前端页面卡死了&#xff0c;开始代码是这么写的 wx.showLoading({title: 文件上传中...,mask: true // 是否显示透明蒙层&#xff0c;防止触摸穿透&#xff0c;默认&#xff1a;false});const {fileList} that.…

Nginx理论篇与相关网络协议

Nginx是什么&#xff1f; Nginx是一款由C语言编写的高性能、轻量级的web服务器&#xff0c;一个线程能处理多个请求&#xff0c;支持万级并发。 优势&#xff1a;I/O多路复用。 I/O是什么&#xff1f; I指的是输入&#xff08;Input&#xff09;,O是指输出&#xff08;Outp…