我的磨文件列表添加可自定义样式的排列序号(利用CSS计数器)

此代码仅供参考

---

代码说明

再次给各位磨友分享一款给我的磨文件列表添加排列序号的CSS，相比之前发的利用CSS的list-style属性添加序号，这个利用CSS计数器添加的可以自定义样式。

使用方法及注意事项,使用前请先阅读本内容
以下是三个示例，你也可以自己修改自己喜欢的样式，注意别误删 counter-reset: tzs;,counter-increment: tzs;,content: counter(tzs);

通过对比可以得到，想要修改其他序号背景样式，只要修改下border-radius: ;的圆角边框参数值就行了。。。

---

CSS代码(样式一)

.file_list{ counter-reset: tzs; } .file_list li{ counter-increment: tzs; } .file_list li:before{ content: counter(tzs); background: yellow; color: blue; padding: 2px 4px; border: 1px solid black; margin: 1px 2px; font:1.1em bold italic; border-radius: 5px; } .file_list li:nth-child(-n+9):before{ content: "0"counter(tzs); }

---

代码一演示

•  涂鸦跳跃豪华BT版-无限火箭筒(jar)
•  涂鸦跳跃豪华BT版-无限弹簧跳(jar)
•  涂鸦跳跃豪华BT版-无限竹蜻蜓(jar)

---

CSS代码(样式二)

.file_list{ counter-reset: tzs; } .file_list li{ counter-increment: tzs; margin: 4px auto; } .file_list li:before{ content: counter(tzs); background: red; color: gold; padding: 2px 4px; border: 3px solid black; font:1.1em bold italic; } .file_list li:nth-child(-n+9):before{ content: "0"counter(tzs); }

---

代码二演示

•  涂鸦跳跃豪华BT版-无限火箭筒(jar)
•  涂鸦跳跃豪华BT版-无限弹簧跳(jar)
•  涂鸦跳跃豪华BT版-无限竹蜻蜓(jar)

---

CSS代码(样式三)

.file_list{ counter-reset: tzs; } .file_list li{ counter-increment: tzs; margin: 4px auto; } .file_list li:before{ content: counter(tzs); background: grey; color: yellow; padding: 2px 4px; font:1.1em bold italic; border-radius:.8em; } .file_list li:nth-child(-n+9):before{ content: "0"counter(tzs); }

---

代码三演示

•  涂鸦跳跃豪华BT版-无限火箭筒(jar)
•  涂鸦跳跃豪华BT版-无限弹簧跳(jar)
•  涂鸦跳跃豪华BT版-无限竹蜻蜓(jar)

---

CSS代码(样式四)

/*本CSS由 小客站(tzs.wodemo.com) 编写*/ .file_list{ counter-reset:section; } .file_list li{ counter-increment:section; margin: 4px auto; } .file_list li:before{ content:"" counter(section); background: #ffffff; color: #00deed; padding:2px 4px; border-radius:2px 10px 10px 5px; } .file_list li:nth-child(-1n+9):before{ content:"0" counter(section); }

---

代码四演示

•  涂鸦跳跃豪华BT版-无限火箭筒(jar)
•  涂鸦跳跃豪华BT版-无限弹簧跳(jar)
•  涂鸦跳跃豪华BT版-无限竹蜻蜓(jar)

---

CSS代码(样式五)

/*本CSS由 小客站(tzs.wodemo.com) 编写*/ .file_list{ counter-reset:number; } .file_list li{ counter-increment:number; } .file_list li:before{ content:"" counter(number) ".";color:black; } .file_list li:nth-child(-1n+9):before{ content:"0" counter(number) "."; }/*或(-n+9)，匹配前9个（包括第9个）li，这个较为实用点，用来限定前面N个匹配常会用到*/

---

代码五演示

•  涂鸦跳跃豪华BT版-无限火箭筒(jar)
•  涂鸦跳跃豪华BT版-无限弹簧跳(jar)
•  涂鸦跳跃豪华BT版-无限竹蜻蜓(jar)

---

---