CSS数字列表实现方法

下面就是详细讲解CSS数字列表实现方法的完整攻略。

什么是CSS数字列表

CSS数字列表（也叫CSS计数器）是指CSS中的一个功能，可以按照指定格式生成一系列连续的数字，并将这些数字与指定的HTML元素相连，用来实现元素的自动编号。

例如：

1. 第一步
2. 第二步
3. 第三步

HTML代码为：

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

这里的ol标签是有序列表的标签，通过CSS数字列表可以将其自动编号为1、2、3。同时，CSS数字列表还可以对编号的样式进行自定义。

实现CSS数字列表的方法

添加计数器

要使用CSS数字列表，首先需要给list-style-type属性赋上none值，去掉列表自带的默认编号样式。然后使用counter-reset属性为计数器设置一个初始值。

例如，想让一个没有编号的ul列表元素实现自动编号：

<ul>
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
</ul>

CSS代码如下：

ul{
  list-style-type: none; /*去掉自带的默认编号*/
  counter-reset: my-counter; /*初始化计数器*/
}

这里的my-counter可以自定义，可以是任何字符、数字等，只要不是CSS的保留关键字即可。

使用计数器

设置完计数器之后，需要在自定义的编号位置使用计数器。这里使用counter-increment属性来让计数器加1。同时，通过:before伪元素来将计数器的值插入到指定元素的内容前面。

例如，想要让上面的ul列表元素自动编号：

<ul>
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
</ul>

CSS代码如下：

ul{
  list-style-type: none; /*去掉自带的默认编号*/
  counter-reset: my-counter;  /*初始化计数器*/
}

li:before{
  content: counter(my-counter) ". "; /*将计数器的值插入到内容前面*/
  counter-increment: my-counter; /*计数器加1*/
}

这里的li:before表示在每个li元素的内容前面插入编号。content属性中的counter(my-counter)表示使用my-counter计数器的当前值，后面的". "表示用于分隔编号和内容的符号。

自定义编号样式

如果想要自定义编号样式，需要使用到CSS中的一些其他属性，如font-size、color、padding、border等。通过这些属性的使用，可以将自动编号样式完全自定义。

例如，想让上面的ul列表元素实现自动编号，并且编号样式为圆形：

<ul>
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
</ul>

CSS代码如下：

ul{
  list-style-type: none; /*去掉自带的默认编号*/
  counter-reset: my-counter; /*初始化计数器*/
}

li{
  position: relative; /*设置相对定位*/
}

li:before{
  content: ""; /*插入空内容*/
  display: inline-block; /*变成块级元素*/
  width: 15px; /*设置尺寸宽度*/
  height: 15px; /*设置尺寸高度*/
  background-color: #000; /*设置背景色*/
  color: #fff; /*设置颜色*/
  line-height: 15px; /*设置行高*/
  text-align: center; /*设置文字居中*/
  border-radius: 50%; /*设置为圆形*/
  margin-right: 10px; /*设置间距*/
}

li:before{
  content: counter(my-counter); /*用于显示计数器的值*/
  counter-increment: my-counter; /*计数器加1*/
}

这里的li:before中的样式可以自定义，通过调整样式属性可以实现不同的编号样式效果。

示例说明

示例一

下面介绍一个示例，是使用CSS数字列表来对一篇文章进行自动编号。HTML代码如下：

<h2>正文</h2>
<p>这是一篇文章正文内容</p>
<p>这是一篇文章正文内容</p>
<p>这是一篇文章正文内容</p>

<h2>结论</h2>
<p>这是这篇文章的结论</p>

<h2>参考文献</h2>
<p>这是文章中引用的参考文献</p>

希望对上面的h2标题进行自动编号，编号样式为1、2、3。CSS代码如下：

h2{
  counter-increment: my-counter; /*计数器加1*/
}

h2:before{
  content: counter(my-counter) ". "; /*显示计数器的值*/
}

这样就可以实现对文章中的章节标题自动编号了。

示例二

下面介绍一个示例，是使用CSS数字列表来对一个菜单进行自动编号。HTML代码如下：

<ul>
    <li>菜单1
        <ul>
            <li>子菜单1</li>
            <li>子菜单2</li>
            <li>子菜单3</li>
        </ul>
    </li>
    <li>菜单2</li>
    <li>菜单3
        <ul>
            <li>子菜单1</li>
            <li>子菜单2</li>
            <li>子菜单3</li>
        </ul>
    </li>
</ul>

希望对菜单列表进行自动编号，编号样式为1、1.1、1.2、1.3、2、3.1、3.2、3.3。CSS代码如下：

ul{
  list-style-type: none; /*去掉自带的默认编号*/
  counter-reset: my-counter; /*初始化计数器*/
}

li:before{
  content: counter(my-counter) ". "; /*显示计数器的值*/
  counter-increment: my-counter; /*计数器加1*/
}

li ul{
  counter-reset: my-subcounter; /*初始化子计数器*/
}

li li:before{
  content: counter(my-counter) "." counter(my-subcounter) " "; /*显示计数器的值*/
  counter-increment: my-subcounter; /*子计数器加1*/
}

这样就可以实现对一个有子菜单的菜单列表进行自动编号了，同时也可以自定义不同的编号样式。