CSS 属性 list-style-type
list-style-type
可以设置列表元素的 marker(比如圆点、符号、或者自定义计数器样式), 默认为disc实心圆点- 参考MDN
常见属性
none
不显示<ul style="list-style-type: none;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
disc
实心圆(默认)<ul style="list-style-type: disc;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
circle
空心圆<ul style="list-style-type: circle;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
square
实心方块<ul style="list-style-type: square;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
decimal
十进制阿拉伯数字<ul style="list-style-type: decimal;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
cjk-decimal
十进制数大写<ul style="list-style-type: cjk-decimal;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
decimal-leading-zero
十进制阿拉伯数字(个位数前面补零)<ul style="list-style-type: decimal-leading-zero;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
lower-roman
小写的罗马数字<ul style="list-style-type: lower-roman;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
upper-roman
大写的罗马数字<ul style="list-style-type: upper-roman;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
- 其他
- lower-greek 小写古典希腊文
- lower-alpha, lower-latin 小写ASCII字母
- upper-alpha, upper-latin 大写ASCII字母
- 其他非常用的属性值:语法取值
特殊属性
取值为
cjk-decimal
,cjk-ideographic
,japanese-informal
,korean-hanja-informal
,trad-chinese-informal
时,个位都是 一、二、三…<ul style="list-style-type: cjk-decimal;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
取值为
korean-hanja-formal
,simp-chinese-formal
,trad-chinese-formal
时,个位都是 壹、贰、叁…<ul style="list-style-type: simp-chinese-formal;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
cjk-earthly-branch
:子、丑、寅…(地支序号)- 地支超过十二时会自动排序:子子、子丑、子寅…(天干同理)
<ul style="list-style-type: cjk-earthly-branch;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
- 地支超过十二时会自动排序:子子、子丑、子寅…(天干同理)
cjk-heavenly-stem
:子、丑、寅…(天干序号)<ul style="list-style-type: cjk-heavenly-stem;"> <li>白日依山尽</li> <li>黄河入海流</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
自定义序号
自定义数字
<style>
@counter-style circled-simp-chinese-informal {
system: additive;
suffix: " ";
additive-symbols: ㊉ 10, ㊈ 9, ㊇ 8, ㊆ 7, ㊅ 6, ㊄ 5, ㊃ 4, ㊂ 3, ㊁ 2, ㊀ 1;
}
.origin {
list-style: circled-simp-chinese-informal;
}
</style>
<ul class="origin">
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
</ul>
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
自定义表情
<style>
@counter-style emoji-test {
system: additive;
suffix: " ";
additive-symbols: 😍 10, 😜 9, 😂 8, 😅 7, 😁 6, 🙂 5, 😐 4, 🙁 3, 😨 2, 😭 1;
}
.emoji {
list-style: emoji-test;
}
</style>
<ul class="emoji">
<li>君不见,黄河之水天上来,奔流到海不复回</li>
<li>君不见,高堂明镜悲白发,朝如青丝暮成雪</li>
<li>人生得意须尽欢,莫使金樽空对月</li>
<li>天生我材必有用,千金散尽还复来</li>
<li>烹羊宰牛且为乐,会须一饮三百杯</li>
<li>岑夫子,丹丘生,将进酒,杯莫停</li>
<li>与君歌一曲,请君为我倾耳听</li>
<li>钟鼓馔玉不足贵,但愿长醉不愿醒</li>
<li>古来圣贤皆寂寞,惟有饮者留其名</li>
<li>陈王昔时宴平乐,斗酒十千恣欢谑</li>
<li>主人何为言少钱,径须沽取对君酌</li>
<li>五花马,千金裘,呼儿将出换美酒,与尔同销万古愁</li>
</ul>
- 君不见,黄河之水天上来,奔流到海不复回
- 君不见,高堂明镜悲白发,朝如青丝暮成雪
- 人生得意须尽欢,莫使金樽空对月
- 天生我材必有用,千金散尽还复来
- 烹羊宰牛且为乐,会须一饮三百杯
- 岑夫子,丹丘生,将进酒,杯莫停
- 与君歌一曲,请君为我倾耳听
- 钟鼓馔玉不足贵,但愿长醉不愿醒
- 古来圣贤皆寂寞,惟有饮者留其名
- 陈王昔时宴平乐,斗酒十千恣欢谑
- 主人何为言少钱,径须沽取对君酌
- 五花马,千金裘,呼儿将出换美酒,与尔同销万古愁