css3 计数器 counter-reset counter-increment

最新推荐文章于 2024-04-20 15:14:31 发布

公有云私有云

最新推荐文章于 2024-04-20 15:14:31 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qq_39579242/article/details/81080613

版权

1、计数器的作用
向已存在的html文本内容增添序号
2、如何使用计数器
1、定义计数器
属性:counter-reset
   作用:定义一个计数器，并且设置初始值为0
   body{
       counter-reset:计数器名称初始值计数器名称初始值;
   }
   body{
       counter-reset:count 10;
   }

2、设置计数器增量
可以单独设置某一选择器使用计数器时的增量，默认值是1
   属性:counter-increment
div{
       counter-increment:count 10;
   }
3、使用计数器
通过 counter(计数器名称) 来使用计数器
   div:before{
       content:"第"counter(count)"章";
   }

<!DOCTYPE html>
<html>
 <head>
  <title> 内容生成 </title>
  <meta charset="utf-8"/>
  <meta name="HSW" content="">
  <meta name="Keywords" content="">
  <style>
	/*1、声明计数器,名称为mycounter,初始值为0*/
	body {
		counter-reset:mycounter 0;
	}
	/*2、在h1中实现数字的增长，即在h1中设置计数器的增量 1*/
	h1 {
		counter-increment:mycounter 1;
	}
	/*3、在h1中使用计数器*/
	h1:before {
		content:"第"counter(mycounter)"章";
	}
  </style>
 </head>

 <body>
  <h1>Web 基础知识</h1>
  <h1>HTML 快速入门</h1>
  <h1>网页中的文本</h1>
 </body>
</html>

公有云私有云

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css3 计数器 counter-reset counter-increment

1、计数器的作用向已存在的html文本内容增添序号 2、如何使用计数器 1、定义计数器属性:counter-reset 作用:定义一个计数器，并且设置初始值为0 body{ counter-reset:计数器名称初始值计数器名称初始值; } body{ counte...
复制链接

扫一扫