CSS list-style 列表标记

CSS列表标记：list-style-type(预定义/disclosure-open/string/none/counter())、list-style-position(inside/outside标记是否包含在内)、list-style-image自定义图片标记url()、@counter-style自定义计数器样式规则(system/symbols/prefix/suffix/pad) · 难度：入门 · +10XP

CSS list-style —— 自定义你的列表标记

默认的无序列表是小圆点，有序列表是1、2、3。但你可以把标记换成任何东西——对勾、箭头、星星、甚至自定义图片。

list-style-type 常用值

ul { list-style-type: square; }     /* 实心方块 */
ul { list-style-type: "✓  "; }     /* 自定义字符串标记 */
ol { list-style-type: lower-roman; } /* i, ii, iii... */
ol { list-style-type: lower-alpha; } /* a, b, c... */

用图片做标记

ul.check-list {
  list-style-image: url('checkmark.svg');
}

标记位置

ul { list-style-position: inside; }  /* 标记在内容区内 */
ul { list-style-position: outside; } /* 标记在内容区外（默认）*/

动手练习

1. 基础练习：做一个用对勾标记的已完成任务列表。
2. 进阶应用：用@counter-style自定义一套编号规则（如①、②、③）。
3. 项目实战：统一网站所有列表的标记样式，替代默认的圆点和数字。