css实现自动编号的方法是什么

　　

css实现自动编号的方法是什么?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

2.1在css中的自动编号由两个属性控制,它们分别为:“counter-increment”和“counter-reset”。由这些属性定义的计数器(柜台)与“内容”属性的计数器()和计数器()函数一起使用。

<强>语法:

counter-increment: [& lt; identifier>& lt; integer> ?]+ | |没有继承

<强>说明:

初始:,没有

适用于:,所有元素

继承:,没有

百分比:,N/A

媒体:,所有

计算值:,作为指定

counter-increment& # 39;属性接受的计数器(标识符)的一个或多个名称,每一个名称可选地跟随一个整数。整数表示每次出现元素时计数器的递增程度,默认增量为1,允许零和负整数。

<强>语法:

counter-reset: [& lt; identifier>& lt; integer> ?]+ | |没有继承

<强>说明:

初始:,没有

适用于:,所有元素

继承:,没有

百分比:,N/

媒体:,所有

计算值:,作为指定

counter-reset属性包含计数器的一个或多个名称,每一个名称可选地任选地跟随一个整数的列表。整数给出每次出现元素时计数器设置的值。默认值为0。

注:关键字& # 39;没有# 39;,& # 39;继承# 39;和& # 39;初始# 39;不得用作计数器名称,值& # 39;没有# 39;本身意味着没有重置计数器,& # 39;继承# 39;本身具有其通常的含义(继承),“初始”保留供将来使用。

例:显示了使用“第1章”、“1.1”、“1.2”等对章节进行编号的方法。

html代码:

& lt; h2>大标题& lt;/h2> 　　& lt; h3>小标题1 & lt;/h3> 　　& lt; h3>小标题2 & lt;/h3>

css代码:

身体{ 　　counter-reset:章;/*创建章节计数器范围*/} 　　h2:{之前 　　内容:“第”;计数器(章)“章”; 　　counter-increment:章;/*在章节中添加1 */} 　　h2 { 　　counter-reset:部分;/*将部分设置为0 */} 　　h3:{之前 　　内容:计数器(章)“!”计数器(节)“;“; 　　counter-increment:部分; 　　}

效果图:

css实现自动编号的方法是什么

注:

1,如果元素递增(增量)/重置(重置)计数器并且还使用计数器(在其:之前或:后伪元素的& # 39;内容# 39;属性中),则需在递增/重置后使用计数器。

2,如果元素既重置又增加计数器,则首先重置计数器然后递增。

3,如果在& # 39;counter-reset& # 39;和& # 39;counter-increment& # 39;属性的值中多次指定相同的计数器,则按指定的顺序处理计数器的每个复位/增量。

例:

1,将& # 39;节# 39;计数器重置为0:

h2 {counter-reset:第二节部分}

2,将“章”计数器增加3:

h2 {counter-increment:第二章章}

3,在“counter-reset”属性遵循层叠规则。因此,由于级联,以下样式表:

h2 {counter-reset:第一节} 　　h2 {counter-reset: imagenum 99}

4,只会重置& # 39;imagenum& # 39;。要重置两个计数器,必须同时指定它们:

h2 {counter-reset:第一节imagenum 99}

默认情况下,计数器使用十进制数字格式化,但“list-style-type”属性的所有可用样式也可用于计数器。符号是:

计数器(名字)

默认样式,或设置其他样式:

计数器(名称、& lt;& # 39;list-style-type& # 39;祝辞)

计数器允许使用list-style-type属性的所有样式,包括& # 39;盘# 39;& # 39;圆# 39;,& # 39;广场# 39;和& # 39;没有# 39;。

例:

h2:{之前 　　内容:计数器(chno upper-latin)“。“; 　　} 　　 　　h3:{之前 　　内容:计数器(部分,大写罗马数字)“;——“; 　　} 　　 　　引用:{后 　　内容:“[“;计数器(bq lower-greek)“]”; 　　} 　　 　　div.note:{之前 　　内容:计数器(notecntr盘)“;“; 　　} 　　 　　p:{之前 　　内容:计数器(p,没有) 　　}

感谢各位的阅读!看完上述内容,你们对css实现自动编号的方法是什么大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。

css实现自动编号的方法是什么