css3 伪类content属性实现行号自动递增
正如标题,这也是我最近项目中遇到的需求,这个例子很简单,相信大家都会有很多种方法来实现这一效果。在很早之前,计数器仅存在于 ul,ol 等元素中,如何想给其他元素增加计数,就只能通过list-style-image
,或者background-image
来实现。而我的布局结构恰恰没有到 ul ol 等元素,所以如果是想要给其他元素增加计数效果就只能另想它法,
正好css3
增加了counter
属性,可以实现任何元素的计数作用。不过这个 counter 属性还需要配合其他 css 属性一起才能有效果。
虽然很简单,但是用到了 css3 的 counter 属性,很久没用这个属性了,正好来回忆一下知识点,做一个笔记,方便日后查看,所谓“温故而知新”大概就是这个意思,我们还是从基础说起。
CSS Counters 用到的属性
前面也提到过,使用 CSS Counters 给元素创建自动递增计算器不仅仅是依赖于某一个 CSS 属性来完成,他需要几个属性一起使用才会有效果。使用的到属性包括:
counter-reset
:此值是必需的。必须用于选择器,主要用来标识该作用域,其值可以自定义。counter-increment
:用来标识计数器与实际相关联的范围。content
:用来生成内容,其为:before
、:after
或::before
、::after
的一个属性。在生成计数器内容,主要配合 counter()一起使用。counter()
:该函数用来设置插入计数器的值。:before
、:after
或::before
、::after
:配合content
用来生成计数器内容。
要想完全了解或者熟练使用好 CSS Counters
来创建计数器,就需要对用到的每个属性的使用规则有一定的了解。接下来就先简单的了解这几个属性。
counter-reset
语法规则
counter-reset:[ <identifier> <integer>? ]+ | none | inherit
取值说明
counter-reset 的默认值为 none,其主要取值包括两个部分:
identifier
:用来定义计数器的名称,这个名称可以自定义,如:item。而且后面可以紧跟一个整数值,中间用空格分隔开来,如 headings 0;integer
:此值用来设置调用计算数器时起始值,默认值为 0。
功能描述
counter-reset
主要功能用来标识计数器作用域,而且此值必须用在选择器上,必且是不能缺少的。共包括两个部分,第一个部分是自定义计数器名称,这一部分是必需的。第二部分是计数器起始值,此值是可选的。默认值为 0。此值告诉标识组起始值是什么,所以说这个值非常有价值。因为,如果你设置的值为 0,那么计数从 1 开始;如果你设置的值是-5,那么计数从-4 开始。依此类推。
counter-reset
自定义计数器名称时可以随意取名,但此名不能是 CSS 的关键词,比如 none、inherit 之类。
counter-reset
属性可以包含一个或者多个计数器标识符,每个后面都可以跟一个整数值,如 section 0 heading 0。如果元素都重置,并且增加一个计数器,计数器是第一次重置,后面值就会递增。如果不止一次指定同一个计算器,则将按指定的计数器做递增。
counter-increment
语法规则
counter-increment:[ <identifier> <integer>? ]+ | none | inherit
默认值为 none。其值也包括两个部分:
identifier
:计数器名称,就调用counter-reset
声明的计数器的标识符。integer
:一个整数值,指定计数起始值。其值允许是 0 或者负整数值,如果未指定任何值,则该值为 1(前提是 counter-reset 未显式设置计数的起始值)。其值递增是按倍数值递增,如果设置了值为 2,后面元素递增值为 4、6、8,依此类推。
功能描述
counter-increment
属性是用来标识计数器与实际相关联元素范围。其第一个值是必需的,获取 counter-reset 定义的标识符。
counter-ncrement
第二个值是一个可选值,是一个整数值,可以是正整数,也可以是负整数。主要用来预设递增的值,如果取值为负值时,表示递减。默认值为 1。
content
content
是和伪类:before
、:after
或者伪元素::before
、::after
配合在一起使用,主要功能用来生成内容。
counter()
counter()
是一个函数,其主要配合content
一起使用。使用counter()
来调用定义好的计数器标识符。
counter()
函数接受两个参数,而且两参数之间使用逗号(,)来分隔。第一个参数是counter-increment
定义的属性值,用来告诉该文档插入的计数器标识符名称是什么。第二个是用来设置计数器的风格,有点类似于list-style-type
。默认情况之下取值为十制,但你也可以重置这个样式风格,比如upper-roman
或者upper-alpha
等。
counter()
函数第二个值与列表中的 list-style-type 值相等:
注释:如果使用了“display:none”
,则无法增加计数。如使用“visibility:hidden”
,则可增加计数。
我项目中的使用
HTML 代码
<pre> <code class="html hljs xml"> <span class="code_ids"></span> </code> </pre>
CSS 代码
.code-show { pre{ max-height: 463px; } code{ max-height: 450px; overflow: auto; padding-left: 50px; counter-reset: step; counter-increment: step 0; position: relative; } pre, code { counter-reset: step; display: block; white-space: pre; /* css-3 */ white-space: -moz-pre-line; /* Mozilla, since 1999 */ white-space: -pre-line; /* Opera 4-6 */ white-space: -o-pre-line; /* Opera 7 */ /* Internet Explorer 5.5+ */ white-space: pre; /* Firefox */ } code .code_ids:before { color: #516363; position: absolute; left: 5px; counter-increment: step; content: counter(step); width: 25px; border-right: 1px solid #c5c5c5; text-align: right; padding-right: 10px; } .code_ids { line-height: 1.4em; } }
效果如下:
网上例子
<html> <head></head> <body> <div class="box"> <ul> <li> <a href="#">码云笔记 - mybj123.com</a> <ul> <li><a href="#">前端技术</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">HTML/CSS</a></li> </ul> </li> <li> <a href="#">源码</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">html</a></li> <li><a href="#">css</a></li> </ul> </li> <li><a href="#">typescript</a></li> <li><a href="#">node.js</a></li> <li><a href="#">vue.js</a></li> </ul> </div> </body> </html>
CSS 代码
* { padding: 0; margin: 0; } a { text-decoration: none; color: #fff; } li { list-style: none; } body { font-size: 14px; font-family: "微软雅黑"; } .box { width: 300px; margin: 100px auto; background-color: #234D3C; } .box ul li { padding-left: 10px; border-bottom: 1px solid #fff; counter-increment: test; } .box ul li:before { content: counter(test)"."; padding-right: 12px; color: red; } .box ul li li { counter-increment: test2; } .box ul li li:before { content: counter(test)"-"counter(test2)"."; padding-right: 12px; color: red; }
效果如下:
码云笔记 » css3 伪类content属性实现行号自动递增