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

发布时间:2020-08-29 14:54:59 作者:小新
来源:亿速云 阅读:267

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

一、自动编号

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

'counter-increment'

语法:

counter-increment:[ <identifier> <integer>? ]+ | none | inherit

说明:

初始:  没有

适用于:  所有元素

继承:  没有

百分比:  N / A

媒体:  所有

计算值:  作为指定

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

'counter-reset'

语法:

counter-reset:[ <identifier> <integer>? ]+ | none | inherit

说明:

初始:   没有

适用于:   所有元素

继承:   没有

百分比:   N / A

媒体:   所有

计算值:   作为指定

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

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

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

html代码:

<h2>大标题</h2>
<h3>小标题1</h3>
<h3>小标题2</h3>

css代码:

body {
    counter-reset: chapter;      /* 创建章节计数器范围 */
}
h2:before {
    content: "第" counter(chapter) "章、";
    counter-increment: chapter;  /* 在章节中添加1 */
}
h2 {
    counter-reset: section;      /* 将部分设置为0 */
}
h3:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

效果图:

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

注:

1、如果元素递增(increment)/重置(resets)计数器并且还使用计数器(在其:before或:after伪元素 的'content'属性中),则需在递增/重置后使用计数器。

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

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

例:

1、将'section'计数器重置为0:

h2 { counter-reset: section 2 section }

2、将“chapter”计数器增加3:

h2 { counter-increment: chapter chapter 2 }

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

h2 {counter-reset:section -1}
h2 {counter-reset:imagenum 99}

4、只会重置'imagenum'。要重置两个计数器,必须同时指定它们:

h2 {counter-reset:section -1 imagenum 99}

二、计数器的样式

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

counter(name)

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

counter(name,< 'list-style-type' >)

计数器允许使用list-style-type属性的所有样式,包括'disc','circle','square'和'none'。

例:

h2:before {
	content: counter(chno, upper-latin) ". "
}

h3:before {
	content: counter(section, upper-roman) " - "
}

blockquote::after {
	content: " [" counter(bq, lower-greek) "]"
}

div.note:before {
	content: counter(notecntr, disc) " "
}

p:before {
	content: counter(p, none)
}

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

推荐阅读:
  1. css使用计数器给元素自动编号的方法
  2. css实现div居中的方法是什么

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

css

上一篇:java链表应用--基于链表实现队列详解(尾指针操作)

下一篇:Laravel的Nginx重写规则实例代码

相关阅读

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

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