温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css中的计数器是什么

发布时间:2022-03-08 17:20:37 来源:亿速云 阅读:187 作者:小新 栏目:web开发

这篇文章给大家分享的是有关css中的计数器是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

  css计数器是什么?

  计数器是css3提供的一个强大的工具,是一种可以让我们使用CSS给元素自动编号的方法。使用它可以很方便对页面中的任意元素进行计数,实现类似于有序列表的功能。但与有序列表相比,css计数器可以对任意元素计数,同时还可以实现个性化计数。

  css计数器的相关属性

  1、counter-reset

  counter-reset属性用于定义和初始化一个或多个CSS计数器。它可以使用一个或多个标识符作为值,该值指定计数器的名称。

  使用语法:

  counter-reset:[<标识符><整数>?]+|none|inherit

  每个计数器名称后面都可以跟一个可选的<整数>值,该值指定计数器的初始值。

  注意:

  1)、关键字none,inherit和initial不能作为计数器名称;关键字none,inherit可以作为计counter-reset属性的值。

  设置none将取消设置计数器;设置inherit将从元素的父元素处继承counter-reset值。该counter-reset属性的默认值为none。

  2)、计数器的初始值不是计数器显示时的第一个数字/值。

  这意味着如果希望计数器从1开始显示,则需要将counter-reset中的初始值设置为零。0是默认的初始值,所以如果省略它,默认情况下它将重置为零;counter-reset允许使用负值。因此,如果希望计数器从零开始显示,可以将其初始值设置为-1。

  示例:

  someSelector{

  counter-reset:counterA;/*计数器counterA初始,初始值为0*/

  counter-reset:counterA6;/*计数器counterA初始,初始值为6*/

  counter-reset:counterA4counterB;/*计数器counterA初始,初始值为4,计数器counterB初始,初始值为0*/

  counter-reset:counterA4counterB2;/*计数器counterA初始,初始值为4,计数器counterB初始,初始值为2*/

  }

  2、counter-increment

  counter-increment属性用于指定一个或多个CSS计数器的增量值。它将一个或多个标识符作为值,指定要递增的计数器的名称。

  使用语法:

  counter-increment:[<标识符><整数>?]+|none|inherit

  每个计数器名称(标识符)后面都可以跟一个可选<整数>值,该值指定对于我们所编号的元素每次出现时,计数器需要递增多少。默认增量为1。允许零和负整数。如果指定了负整数,则计数器被递减。

  counter-increment属性必须和counter-reset属性配合使用,下面我们来看看示例:

  article{/*定义和初始化计数器*/

  counter-reset:section;/*'section'是计数器的名称*/

  }

  articleh3{/*每出现一次h3,计数器就增加1*/

  counter-increment:section;/*相当于计数器增量:第1节;*/

  }

  3、counter()函数

  counter()函数必须和content属性一起使用,用来显示CSS计数器。它以CSS计数器名称作为参数,并作为值传递给content属性,而content属性就会使用:before伪元素将计数器显示为生成的内容。

  例:

  h3:before{

  content:counter(section);

  }

  counter()函数有两种形式:counter(name)和counter(name,style)。

  name参数就是要显示的计数器的名称;使用counter-reset属性就可以指定计数器的名称。

  style参数是用来定义计数器的风格。默认情况下,计数器使用十进制数字格式化,也就是说,计数器会以数字的形式生成内容;但其实,csslist-style-type属性的所有可用样式也可用于计数器。这意味着您可以创建十进制数字计数器,显示为罗马字符的计数器,低字母字符等。以下是所有可能的计数器样式:

  disc:实心圆样式

  circle:空心圆样式

  square:实心方块样式

  decimal:阿拉伯数字样式

  lower-roman:小写罗马数字样式

  upper-roman:大写罗马数字样式

  lower-alpha:小写英文字母样式

  upper-alpha:大写英文字母样式

  none:不使用项目符号

  armenianl:传统的亚美尼亚数字样式

  cjk-ideographic:浅白的表意数字样式

  georgian:传统的乔治数字样式

  lower-greek:基本的希腊小写字母样式

  hebrew:传统的希伯莱数字样式

  hiragana:日文平假名字符样式

  hiragana-iroha:日文平假名序号样式

  katakana:日文片假名字符样式

  katakana-iroha:日文片假名序号样式

  lower-latin:小写拉丁字母样式

  upper-latin:大写拉丁字母样式

  以下是指定使用lower-roman字符显示计数器的示例:

  ulli:before{

  content:counter(my-counter,lower-roman);

  }

  4、counters()函数

  counters()函数也必须和content属性一起使用,用来显示CSS计数器。和counter()函数一样,counters()函数也作为值传递给content属性;然后,content属性在使用:before伪元素将计数器显示为生成的内容。

  counters()函数也有两种形式:counters(name,string)和counters(name,string,style)。

  name参数也是要显示的计数器的名称。可以使用counter-reset属性来指定计数器的名称。

  而counters()函数与counter()函数(单数形式)区别在于:counters()函数可以用于设置嵌套计数器。

  嵌套计数器是用于为嵌套元素(如嵌套列表)提供自动编号。如果您要将计数器应用于嵌套列表,则可以对第一级项目进行编号,例如,1,2,3等。第二级列表项目将编号为1.1,1.2,1.3等。第三级项目将是1.1.1,1.1.2,1.1.3,1.2.1,1.2.2,1.2.3等。

  string参数用作不同嵌套级别的数字之间的分隔符。例如,在'1.1.2'中,点('.')用于分隔不同的级别编号。如果我们使用该counters()函数将点指定为分隔符,则它可能如下所示:

  content:counters(counterName,".");

  如果希望嵌套计数器由另一个字符分隔,例如,如果希望它们显示为“1-1-2”,则可以使用短划线而不是点作为字符串值:

  content:counters(counterName,"-");

  和counter()函数一样,style参数是用来定义计数器的风格。默认情况下,计数器使用十进制数字格式化。具体关于style参数的设置可以参照counter()函数的style参数。

  以下是一个示例,指定嵌套计数器将使用lower-roman字符显示,并使用点作为分隔符:

  ulli:before{

  content:counters(my-counter,".",lower-roman);

  }

  css计数器(counter)的示例:

  <!DOCTYPEhtml>

  <html>

  <head>

  <metacharset="utf-8"/>

  <title>Tester</title>

  <styletype="text/css">

  body{

  counter-reset:section;

  }

  h2{

  counter-reset:subsection;

  }

  h2:before{

  counter-increment:section;

  content:counter(section)".";

  }

  h4:before{

  counter-increment:subsection;

  content:counter(section)"."counter(subsection)"";

  }

  </style>

  </head>

  <body>

  <h2>css计数器教程</h2>

  <h4>css计数器</h4>

  <h4>css计数器的相关属性</h4>

  <h4>示例说明</h4>

  <h2>css计数器教程</h2>

  <h4>css计数器</h4>

  <h4>css计数器的相关属性</h4>

  <h4>示例说明</h4>

  </body>

  </html>


感谢各位的阅读!关于“css中的计数器是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI