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。

  1. counter-increment

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

复制代码
div.count:before{
    counter-increment: count1 2;
}

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

  1. counter()/counters()

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

计数器使用案例

  1. 基础计数案例
html 复制代码
<!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. 智能识别分段计数
html 复制代码
<!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>
相关推荐
烛阴16 分钟前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔25 分钟前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔26 分钟前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔1 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6141 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止2 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军2 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安2 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js
秋田君2 小时前
Vue3 + WebSocket网页接入弹窗客服功能的完整实现
前端·javascript·websocket·网络协议·学习
浪里行舟2 小时前
一网打尽 Promise 组合技:race vs any, all vs allSettled,再也不迷糊!
前端·javascript·vue.js