[分享]css中怎么把序号分隔开

在CSS中，我们经常会用到序号，比如列表中的列表项序号，都需要我们对它进行一定的样式修改。而有时候，我们需要在序号之间加上分隔符，使得序号更加清晰明了。接下来，我们就来看一下如何在CSS中将序号分隔开...

在CSS中，我们经常会用到序号，比如列表中的列表项序号，都需要我们对它进行一定的样式修改。而有时候，我们需要在序号之间加上分隔符，使得序号更加清晰明了。接下来，我们就来看一下如何在CSS中将序号分隔开。
首先，我们需要在HTML中添加一个有序列表。比如，下面是一个简单的例子：

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

这里使用了<ol>标签来创建有序列表，每一个<li>标签都是一个列表项。
接下来，我们就需要通过CSS来分隔列表项的序号。
首先，我们需要给<li>标签设置一个计数器，例如：

ol { counter-reset: item; }
li { display: block; }
li:before { content: counters(item, ".") ". "; counter-increment: item; } 

上面的样式中，我们使用了counter-reset属性来设置计数器，然后通过li:before伪元素来添加序号。在伪元素中，我们使用content属性来设置序号的样式，同时使用counter-increment属性来对计数器进行自加，保证每个列表项都有一个对应的序号。
不过，这个样式并没有分隔序号。如果我们需要在序号之间添加一个分隔符，比如使用“-”来分隔，我们可以使用如下代码：

li:before { content: counters(item, ".") "- "; counter-increment: item; } 

这样，每个序号都会使用“-”来分隔，更加清晰明了。
通过上述的CSS样式，我们可以轻松的将序号进行分隔，并且可以根据需要进行不同的样式调整。