css如何使用计数器给元素自动编号?css计数器的使用(代码示例)


本文摘自PHP中文网,作者青灯夜游,侵删。

css如何使用计数器给元素自动编号?本篇文章就给大家介绍设置和使用css计数器的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

在之前的文章【css计数器(counter)是什么】中我们简单介绍了css计数器的相关属性,以及通过代码实例来简单了解了一下css计数器的使用,本篇文章我们就来具体看看css计数器是如何设置和使用的,如何实现元素自动编号的。【相关视频教程推荐:CSS3教程】

一、设置和使用css计数器,实现简单的元素编号

为了创建和使用CSS计数器,遵循以下步骤:

1、设置计数器的名称并将其重置为我们选择的初始值。这是使用counter-reset属性完成的。

1

counter-reset:   标识符(计数器的名称)   <整数>(起始值,可选,默认值为0);

初始化计数器(指定起始值)是可选的, 如果没有指定一个确切的值,它将会从零开始,则此时的计数器实现的内会从‘1’开始。

counter-reset属性是在要编号的元素的祖先或兄弟元素上设置的。例如,如果在文章中对标题进行编号,则可以在这些标题的祖先上设置计数器。

1

2

3

4

article {    

/ *设置一个名为“section”的计数器,并将其初始化为0 * /

    counter-reset:section 0 ;

}

其背后的原因是,重置编号元素上的计数器将导致出现具有相同编号的元素。这是因为计数器将被重置为其初始值,然后在显示之前对每个标题进行递增。

2、指定计数器何时递增,以及按什么值递增。

例如,如果希望计数器在每次出现h2标题时递增,那么将可以指定;这是使用counter-increment属性完成的。我们可以选择对每个出现的要编号的元素(本例中为h2)递增计数器的任何值。默认情况下,计数器将递增1;我们还可以使用负值,这样计数器将递减。

1

2

3

4

h2 {    

/ *在每次出现h2时使用“section”计数器,并每次出现就增加1(默认值)* /

    counter-increment:section 1 ;

}

这里需要注意的一件重要事情是:计数器是在显示之前递增,因此如果我们希望第一个标题从1开始,则应该在计算器中将计数器的counter-reset属性初始值设置为零。

3、显示计数器

设置计数器并指定何时以及应该增加多少后,我们需要显示该计数器

要显示计数器,我们就需要使用content属性的counter()函数(或counters()嵌套计数器)作为::before伪元素的值。

在我们的示例中,我们是对h2标题进行编号,因此我们将在标题之前显示计数器:

1

2

3

h2 :: before {    

   content:counter(section);

}

当然,如果你希望在标题的数字和标题之间添加一些空格和可能的任何其他分隔符,可以通过将分隔符附加到计数器的counter()函数中来执行此操作,使用字符串作为值,例:

1

2

3

4

h2::before {   

 /* 在数字之后加一个点,后面加上空格 */

    content: counter(my-counter) ". ";

}

下面我来来看看示例:

html代码:

1

2

3

4

5

<h2>css计数器的使用</h2>

<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>

          

<h2>css计数器的使用</h2>

<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>

css代码:

1

2

3

4

5

6

7

8

body{

     counter-reset: section;

}

              

 h2:before{

     counter-increment: section;

     content: counter(section) ".";

}

效果图:

2.jpg

二、设置嵌套计数器,实现元素的嵌套编号

有时在一个大标题下面还会有多个2级标题,3级标题,标题一个嵌套一个(如,下图),如何编号?

1.jpg

下面我们就来介绍使用嵌套计数器,来实现元素的嵌套编号的方法。

要实现元素的嵌套编号,最简单的方法就是使用counters()函数;使用该函数,我们可以在一个声明中设置多个计数器,默认情况下这些计数器将嵌套。

示例介绍:我们将使用counters()函数在嵌套列表上设置嵌套计数器。列表(ul,ol)可以嵌套到标记中的几个级别,因此我们可以使用counters()函数。

html代码:

阅读剩余部分

相关阅读 >>

已知和未知高度下进行垂直水平居中的方法

css column-count属性怎么用

css怎么设置文字超过隐藏

css背景超出宽度怎么办

css字间距怎么设置

一招搞定css元素五彩斑斓的背景

16 个css开发中需要了解的devtools技巧

border-collapse属性怎么用

css怎样设置按钮不能点击

css text-align属性怎么用

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...