列表标记类型属性

最后更新：2026-09-13

list-style-type 列表标记类型属性

list-style-type 属性用于设置列表项前面的标记类型，如实心圆点、空心圆、数字、罗马数字等。默认值为 disc（实心圆点）。它支持多种预定义标记和自定义字符串，是控制列表视觉效果最常用的属性。

分类
初始值	disc
继承	否
适用于
可动画
CSS 版本	CSS1
状态	标准

📝 语法

list-style-type: none | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | <string>;

⚙️ 取值

值	类型	描述
`disc \| circle \| square \| decimal \| none \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-latin \| upper-latin \| armenian \| georgian \| lower-alpha \| upper-alpha`	关键字	列表标记类型

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
list-style-type	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： list-style-type:none 会完全移除标记，常用于横向导航菜单。

注意： 部分标记类型（如 georgian、armenian）在不同浏览器中的渲染可能不一致。

❓ 常见问题

Qdisc、circle、square 有什么区别？

Adisc 是实心圆点（无序列表默认）、circle 是空心圆、square 是实心方块，都用于无序列表 <ul>，外观随浏览器渲染略有差异。三者中 disc 最常见，circle 视觉较轻，square 适合强调型列表。若某字体缺少对应字形，浏览器会回退到 disc 显示。

Q如何自定义列表标记（emoji 或图标）？

A两种方式：一是直接用字符串值 list-style-type: "→ ";（现代浏览器支持，可写 emoji）；二是更灵活的做法：list-style: none 配合 li::before 插入 content: "✔"，并用 CSS 控制颜色、大小和间距。推荐第二种，可控性强、跨浏览器表现稳定。

Q有哪些常用的数字标记值？

Adecimal（1,2,3）、decimal-leading-zero（01,02）、lower-roman/upper-roman、lower-alpha/upper-alpha、georgian、armenian 等。中文项目常用 decimal、lower-alpha，目录常用 upper-roman。

Qlist-style-type: none 之后列表语义还在吗？

A在。list-style-type: none 只移除视觉上的标记符号，<li> 的列表项语义（listitem）依然保留，屏幕阅读器仍能识别列表结构。只有当内容本身不再是列表时才应改用其他元素。移除标记用于导航等场景，不应因此丢失语义。