@counter-style规则下system各个值实例页面

CSS代码：

@counter-style smile {
    system: cyclic;
    symbols: ☺;
    suffix: " ";
}
.cyclic-smile {
   list-style-type: smile;
}

@counter-style even-odd {
    system: cyclic;
    symbols: 奇 偶;
    suffix: " ";
}
.cyclic-even-odd {
    list-style-type: even-odd;
}

@counter-style numeric {
    system: numeric;
    symbols: ⓐ ⓑ ⓒ;
    suffix: " ";
}
.numeric {
    list-style-type: numeric;
}

@counter-style alphabetic {
    system: alphabetic;
    symbols: ⓐ ⓑ ⓒ;
    suffix: " ";
}
.alphabetic {
    list-style-type: alphabetic;
}
@counter-style fixed {
    system: fixed;
    symbols: ❶ ❷ ❸;
}
.fixed {
    list-style-type: fixed;
}
@counter-style fixed-integer {
    system: fixed 3;
    symbols: ❶ ❷ ❸;
}
.fixed-integer {
    list-style-type: fixed-integer;
}

@counter-style symbolic {
    system: symbolic;
    symbols: ㊎ ㊍ ㊌;
}
.symbolic {
    list-style: symbolic;
}

@counter-style my-upper-roman {
    system: additive;
    range: 1 3999;
    additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
}
.additive {
    list-style: my-upper-roman;
}
.additive-no {
    list-style: upper-roman;
}

@counter-style october-comic {
    system: extends cjk-heavenly-stem;
    prefix: "[10月新番]";
    suffix: "、";
}
.extends {
    list-style: october-comic;
    padding-left: 8em;
}

HTML代码：

<h4>1. cyclic 循环重复</h4>

<ul class="cyclic-smile">
    <li>单项循环</li>
    <li>CSS新世界</li>
    <li>1024程序员节</li>
</ul>

<ul class="cyclic-even-odd">
    <li>双字符循环</li>
    <li>元宇宙</li>
    <li>CSS新世界</li>
    <li>1024程序员节</li>
    <li>求分享</li>
</ul>

<h4>2. alphabetic - 字母顺序算法</h4>

<ul class="alphabetic">
    <li>大帅锅-张</li>
    <li>爱钓鱼-鑫</li>
    <li>写代码-旭</li>
    <li>感谢阅读</li>
    <li>欢迎分享</li>
    <li>欢迎纠错</li>
    <li>欢迎交流</li>
</ul>

<h4>3. numeric 数值顺序算法</h4>
<ul class="numeric">
    <li>大帅锅-张</li>
    <li>爱钓鱼-鑫</li>
    <li>写代码-旭</li>
    <li>感谢阅读</li>
    <li>欢迎分享</li>
    <li>欢迎纠错</li>
    <li>欢迎交流</li>
</ul>

<h4>4. fixed 固定算法</h4>
<ul class="fixed">
    <li>怎么这么多内容</li>
    <li>搞不完了今天</li>
    <li>好困啊</li>
    <li>本以为就一点内容</li>
    <li>没想到是个长篇</li>
</ul>

<ul class="fixed-integer">
    <li>怎么这么多内容</li>
    <li>搞不完了今天</li>
    <li>好困啊</li>
    <li>本以为就一点内容</li>
    <li>没想到是个长篇</li>
</ul>

<h4>5. symbolic 平铺算法</h4>
&nbsp;<ul class="symbolic">
    <li>大帅锅-张</li>
    <li>爱钓鱼-鑫</li>
    <li>写代码-旭</li>
    <li>感谢阅读</li>
    <li>欢迎分享</li>
    <li>欢迎纠错</li>
    <li>欢迎交流</li>
</ul>

<h4>6. additive 附加算法</h4>
<ul class="additive">
    <li>南京航空航天大学实验室爆炸</li>
    <li>华春莹任外交部部长助理</li>
    <li>今冬我国总体偏冷的概率较大</li>
    <li>中国空间站飞越北京古塔</li>
    <li>本轮疫情已波及全国11省份</li>
</ul>
<ul class="additive-no">
    <li>南京航空航天大学实验室爆炸</li>
    <li>华春莹任外交部部长助理</li>
    <li>今冬我国总体偏冷的概率较大</li>
    <li>中国空间站飞越北京古塔</li>
    <li>本轮疫情已波及全国11省份</li>
    <li>我是原生upper-roman效果</li>
</ul>

<h4>7. extends 扩展</h4>
<ul class="extends">
    <li>国王排名</li>
    <li>世界顶尖的暗杀者,转生为异世界贵族</li>
    <li>我被逐出队伍后过上慢生活</li>
    <li>世界尽头的圣骑士</li>
    <li>进化之实 踏上胜利的人生</li>
</ul>