每天一点小进步--css中的counter-increment和counter-reset属性

最新推荐文章于 2024-11-01 16:54:21 发布

弱氵弎仟

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量269

点赞数

分类专栏： html css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_41949511/article/details/110950724

版权

css 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

1.定义

counter-reset 可以创建一个或者多个计数器

counter-increment 用来递增计数器，可以是多个

2.用法

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

<style>
    body {
      counter-reset: aa bb;

    }

    div::before {
      counter-increment: aa;
      content: counter(aa) counter(bb);
    }
</style>

效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

弱氵弎仟

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS 计数器 counter

CyberPlayer的博客

02-25

557

带计数器的自动编号 CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。如需使用 CSS 计数器，我们将使用以下属性： counter-reset- 创建或重置计数器 counter-increment- 递增计数器值 content- 插入生成的内容 counter()或counters()函数 - 将计数器的值添加到元素如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。下面的例子为页面（在 body 选择器中）创...

2017-9-24 小书匠 pdf 导出自定义 css 教程1

08-04

在这个例子中，我们使用`counter-reset`初始化计数器，`counter-increment`更新计数器，并通过`content`属性显示计数器的值。对于一级标题，我们可以设置如下CSS： ```css ul { counter-reset: section; list-...

参与评论您还未登录，请先登录后发表或查看评论

css笔记：理解CSS的 counter-increment属性

lw2309485575的博客

12-29

420

CSS counter-increment 属性实例对部分和子部分进行编号（比如 "Row 1"、"1.1"、"1.2"）的方法： *样式* .liwei{ counter-reset:murenziwei; } .liwei>p{ counter-reset:child; } .liwei>p:before{ counter-increment:murenziwei; c...

counter-reset和counter-increment的用法及其详解

你若成风，我则化雨

04-19

5538

counter-increment 这个属性代表递增一个或多个计数器的值；其默认值为none；其属性值有 none ，id number ，inherit三个属性值 none：代表没有计数器递增。 id number：id 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。 inherit：继承父类的属性值。 counter...

CSS 计数器之 counter-increment 和 counter-set

broken_promise的博客

06-11

682

表示的属性值可以是或者前面的部分, 互斥关系. 其中是默认值. 中的表示前面中括号的内容是. 表示 . 所以下面的这些表达式都是合法的.他们的意思分别为一个简单的案例

CSS 伪元素 counter-increment的多种用法

单枪匹码

12-27

2810

之前已经对CSS content属性进行了大概的了解，我们知道content中有一个counter属性（计数器），而使用counter的过程中我们要使用到counter-increment来递增一个或多个计数器值，其实counter-increment和counter-reset一样还有不同的玩法，这篇文章就来单独的为counter-increment属性写几个小demo记录一下： 1、count...

css3 计数器 counter-reset counter-increment

qq_39579242的博客

07-17

1401

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

深入理解CSS content、counter-increment、counter-reset属性：揭秘计数器与伪元素内容生成的秘密

艾恩小灰灰的博客

04-20

864

CSS的content和属性为开发者提供了强大的内容生成和计数功能。通过深入理解并熟练运用这些特性，您可以在项目中轻松创建有序列表、章节编号、页码等，提升网页内容的组织性和可读性。希望本文的解析与示例能帮助您充分挖掘这组属性的价值，将其融入到日常的CSS编写实践中。

【css】CSS-计数器 counter-reset、counter-increment、counter-reset

呆呆狗

12-22

1069

CSS计数器

详解css counter相关属性学习

09-24

在实际应用中，我们可以在CSS中使用这些计数器的属性来实现复杂的布局和样式设计，比如有序列表、多级列表、注脚编号等。通过counter-reset属性，在父元素上设置计数器初始值，并通过counter-increment属性在子元素...

CSS计数器counter()的用法简介

09-24

CSS计数器的核心属性包括counter-reset、counter-increment和counter()函数。首先，counter-reset属性用来定义一个计数器并初始化其值。默认情况下，计数器的值是0。通过counter-reset属性，可以指定一个或多个...

CSS黑魔法之计数器counter的使用技巧

09-24

例如，使用`counter-reset`属性，可以将计数器重置为0或者任意指定的数值。计数器名称是一个任意的标识符，为后续的计数操作提供了一个引用。计数器的自增操作是通过`counter-increment`属性来实现的。它允许...

counter-reset属性和counter-increment属性

u011936353的专栏

07-29

3608

1、counter-reset 属性用法：counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。说明：利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。注释：如果使用 “display: none”，则无法重置计数器。如果使用 “visibility: hidden”，则可以重置计数器。 2、co

第七章利用CSS和多媒体美化页面

2402_83227353的博客

10-29

887

用这个属性可以同时设置列表型属性（list一style-type），列表项图片属性（list-style-image）和列表项位置属性（list-style-position）。border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时（border-collapse 属性等于separate），相邻单元格边框之间的横向和纵向的间距。caption-side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption标签同时使用。

CSS例子: 横向排列的格子

最新发布

11-01

365

【代码】CSS例子: 横向排列的格子。

CSS浮雕效果

p_s_p的博客

10-30

282

【代码】CSS浮雕效果。

css实现antd丝带效果

m0_62323931的博客

11-01

361

【代码】css实现antd丝带效果。

css 元素高度从0过度到auto的两种方案

qq_31683775的博客

10-30

294

1.使用display: grid;和 grid-template-rows: 0fr;2.使用vue的 <transition>

CSS中display和visibility的区别

低代码布道师的博客

10-31

376

在 CSS 中，display 和 visibility 是两个用于控制元素显示和布局的属性，但它们的作用和效果是不同的。

vue 中 mavon-editor 添加代码行数完整的示例代码

06-08

好的，下面是在 Vue 中使用 mavon-editor 添加代码行数的完整示例代码： ```vue <template> <div> <mavon-editor v-model="content" :defaultOpen="true" :subfield="true" :lineNumbers="true"></mavon-editor> </div> </template> <script> import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' export default { components: { mavonEditor }, data() { return { content: '' } } } </script> <style scoped> .markdown-body .code-toolbar { padding-right: 70px; } .markdown-body pre { counter-reset: linenumber; } .markdown-body pre code { position: relative; } .markdown-body pre code:before { content: counter(linenumber); counter-increment: linenumber; position: absolute; left: -2.5em; text-align: right; width: 2em; color: #999; } </style> ``` 在这个示例中，我们先在 `<mavon-editor>` 组件中添加 `:lineNumbers="true"`，这将启用代码行数显示。然后，我们在样式文件中添加了一些 CSS 样式，用于添加行数。最后，我们将 mavon-editor 引入到组件中，并使用 v-model 指令绑定内容。请注意，以上代码中的样式是基于 markdown-body 样式库的。如果您使用的是其他样式库，请相应地进行修改。