css计数器是什么?
计数器是css3供应的一个壮大的东西,是一种能够让我们运用CSS给元素自动编号的要领。运用它能够很轻易对页面中的恣意元素举行计数,完成类似于有序列表的功用。但与有序列表比拟,css计数器能够对恣意元素计数,同时还能够完成个性化计数。【相干视频教程引荐:CSS3教程】
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: counterA 6; /*计数器counterA 初始,初始值为6*/ counter-reset: counterA 4 counterB; /*计数器counterA 初始,初始值为4,计数器counterB 初始,初始值为0*/ counter-reset: counterA 4 counterB 2; /*计数器counterA 初始,初始值为4,计数器counterB 初始,初始值为2*/ }
2、counter-increment
counter-increment属性用于指定一个或多个CSS计数器的增量值。它将一个或多个标识符作为值,指定要递增的计数器的称号。
运用语法:
counter-increment: [ <标识符> <整数>? ]+ | none | inherit
每一个计数器称号(标识符)背面都能够跟一个可选<整数>值,该值指定关于我们所编号的元素每次涌现时,计数器须要递增若干。默许增量为1。许可零和负整数。假如指定了负整数,则计数器被递减。
counter-increment属性必需和counter-reset属性合营运用,下面我们来看看示例:
article { /* 定义和初始化计数器 */ counter-reset: section; /* 'section' 是计数器的称号 */ } article h2 { /* 每涌现一次h2,计数器就增添1 */ counter-increment: section; /* 相当于计数器增量:第1节; */ }
3、counter()函数
counter()函数必需和content属性一同运用,用来显现CSS计数器。它以CSS计数器称号作为参数,并作为值传递给content属性,而content属性就会运用:before伪元素将计数器显现为生成的内容。
例:
h2:before { content: counter(section); }
counter()函数有两种情势:counter(name)和counter(name, style)。
name参数就是要显现的计数器的称号;运用counter-reset属性就能够指定计数器的称号。
style参数是用来定义计数器的作风。默许情况下,计数器运用十进制数字格式化 , 也就是说,计数器会以数字的情势生成 内容;但实在,css list-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字符显现计数器的示例:
ul li: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字符显现,并运用点作为分开符:
ul li:before { content: counters(my-counter, ".", lower-roman); }
css计数器(counter)的示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Tester</title> <style type="text/css"> body{ counter-reset: section; } h1{ counter-reset: subsection; } h1:before{ counter-increment: section; content: counter(section) "."; } h3:before{ counter-increment: subsection; content: counter(section) "." counter(subsection) " "; } </style> </head> <body> <h1>css计数器教程</h1> <h3>css计数器</h3> <h3>css计数器的相干属性</h3> <h3>示例申明</h3> <h1>css计数器教程</h1> <h3>css计数器</h3> <h3>css计数器的相干属性</h3> <h3>示例申明</h3> </body> </html>
效果图:
总结:以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。
以上就是css计数器(counter)是什么的细致内容,更多请关注ki4网别的相干文章!