[分享]css列表如何实现序号

 CSS有多种方法可以为列表中的每一项添加序号。本文将介绍常用的两种方法。一、使用liststyle和counter属性使用liststyle属性可以设置列表项的符号样式，而使用counter属性可以...

 CSS有多种方法可以为列表中的每一项添加序号。本文将介绍常用的两种方法。
一、使用list-style和counter属性
使用list-style属性可以设置列表项的符号样式，而使用counter属性可以为每一个特定的HTML元素创建一个计数器，并在每次该元素出现时自动增加。
具体实现方法如下：
HTML代码：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul> 

CSS代码：

ul {
  counter-reset: item;
  list-style: none;
}
li:before {
  content: counter(item) ". ";
  counter-increment: item;
} 

解释：
1. 使用counter-reset创建计数器item，并将其初始值设置为0。
2. 使用list-style将列表项的默认符号样式去掉。
3. 使用:before伪元素为每一个列表项添加序号。
4. 在:before伪元素中使用counter(item)获取计数器item的值作为序号，并在每次出现时将计数器item递增。
二、使用CSS计数器
CSS计数器是CSS3新增的一个功能，它可以为元素创建一个自动增长的序号。具体实现方法如下：
HTML代码：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul> 

CSS代码：

ul {
  list-style: none;
  counter-reset: item;
}
li {
  counter-increment: item;
}
li:before {
  content: counter(item) ". ";
} 

解释：
1. 使用list-style将列表项的默认符号样式去掉。
2. 使用counter-reset创建计数器item，并将其初始值设置为0。
3. 使用counter-increment将计数器item在每个列表项中递增。
4. 使用:before伪元素为每一个列表项添加序号，其中使用counter(item)获取计数器item的值作为序号。
需要注意的是，使用CSS计数器时可以通过调整计数器的初始值和递增值来实现不同的序号效果。
总结：以上两种方法都可以实现CSS列表序号，使用时可以根据具体需求选择适合的方法。