CSS你不知道的样式属性 @counter-style

效果图如下：

@counter-style 基本语法如下：

@counter-style 任意自定义名称 {
    /* 具体的规则细节 */    
}

小样代码:

 <ul class="cyclic-smile">
        <li>内容1li>
        <li>内容2li>
        <li>内容3li>
        <li>内容4li>
        <li>内容5li>
        <li>内容6li>
        <li>内容7li>
        <li>内容8li>
        <li>内容9li>
    ul>
    <ul class="cyclic-fixed">
       <li>内容1li>
       <li>内容2li>
       <li>内容3li>
       <li>内容4li>
       <li>内容5li>
       <li>内容6li>
       <li>内容7li>
       <li>内容8li>
       <li>内容9li>
    ul>

说明：

cyclic 表示循环使用开发者提供的一套字符，即如果计数到了末尾，会从头继续开始。
cyclic比较适合用在无序列表上，只需要指定一个字符，就可以无限循环使用

fixed 表示显示的序号字符是固定的，如果超出，不会循环，而是使用背后对应的数字代替呈现。

更多规则属性参考链接：点击此处跳转