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

效果图如下：

@counter-style 基本语法如下：

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

小样代码:

 <style>
        @counter-style smile {
            system: cyclic;
            symbols: 🧞;
            suffix: " ";
        }
        .cyclic-smile {
        list-style-type: smile;
        }
		 @counter-style fixed{
            system: fixed;
            symbols:❶ ❷ ❸;
        }
        .cyclic-fixed{
            list-style-type: fixed;
        }

    </style>

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

说明：

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

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

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