CSS⼩技巧：counter实现有序列表编号⾃增做前端开发的童鞋都知道 ol 是有序列表 ，全称是ordered list。其使⽤有如下⼏种⽅式：
⼀、使⽤数字编号
1 2 3 4 5<ol>
<li>极限编程⽹</li>    <li>博客园</li>
<li>CSDN</li>
</ol>⼆、使⽤⼤写字母
1 2 3 4 5 6 7 8 9 10<ol type="A">
<li>极限编程⽹</li>    <li>博客园</li>
<li>CSDN</li>
</ol>
/* 也可以通过 css 控制*/ ol{
list-style: upper-alpha;
}三、使⽤⼩写字母
1 2 3 4 5 6 7 8 9<ol type="a">
<li>极限编程⽹</li>    <li>博客园</li>
<li>CSDN</li>
</ol>
/* 也可以通过 css 控制*/ ol{
list-style: lower-alpha;
}四、⼤写罗马数字
1 2<ol type="I">
<li>极限编程⽹</li>
3 4 5 6 7 8 9    <li>博客园</li>
<li>CSDN</li>
</ol>
/* 也可以通过 css 控制*/ ol{
list-style: upper-roman;
}五、⼩写罗马数字
1 2 3 4 5 6 7 8 9<ol type="i">
<li>极限编程⽹</li>
<li>博客园</li>
<li>CSDN</li>
</ol>
/* 也可以通过 css 控制*/ ol{
list-style: lower-roman;
}
假如现在有需求，需要我们对 ol 序号做美化，实现如下效果呢？
这⾥我们使⽤css 的 counter 属性搭配 before 伪元素来实现，不过 counter 属性也需要配合其他css属性使⽤，接着说说这两个属性的⽤法。
counter-reset：主要功能是⽤来标识计数器的作⽤域的。它只能作⽤于选择器上，它的值包括两部分：第⼀部分为计数器的名字；第⼆部分为计数器的起始值（默认为0）
counter-increment：表明计数器实际⽤到的范围 。他的值也包括两部分：第⼀个为计数器的名字，即counter-reset设置好的名字，第⼆个值标识递增的值（默认为1）
1 2 3 4 5 6 7 8 9 10 11 12 13<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 counter </title>
<style type="text/css">
ol{
list-style: none;
counter-reset: blogs 0; /* 从 0 开始 */ }
ol li{
position: relative;
font-size: 18px;
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 height: 32px;
line-height: 32px;
background-color: azure;
margin: 4px 0px;
padding: 0px 4px;
}
.counter1 li:before{
position: absolute;
top: 0px;
bottom: 0;
left: -32px;
counter-increment: blogs 1;/* 每次递增 1 */ content: counter(blogs);
width: 32px;
text-align: center;
background-color: #ccc;
}
.counter2 li:before{
position: absolute;
top: 0px;
bottom: 0;
left: -32px;
counter-increment: blogs 2;/* 每次递增 2 */ content: counter(blogs)"、";
width: 32px;
text-align: center;
cssclass属性background-color: #ccc;
}
</style>
</head>
<body>
<ol class="counter1">
<li>极限编程⽹</li>
<li>博客园</li>
<li>CSDN</li>
</ol>
<p></p>
<ol class="counter2">
<li>极限编程⽹</li>
<li>博客园</li>
<li>CSDN</li>
</ol>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。