列表样式简写属性

最后更新：2026-09-13

list-style 列表样式简写属性

list-style 是 list-style-type、list-style-position 和 list-style-image 三个属性的简写，用于一次性设置列表项标记的全部样式。默认值为 disc outside none。它是控制列表外观的最高效方式，常用于快速定制或重置列表样式。

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

📝 语法

list-style: <list-style-type> || <list-style-position> || <list-style-image>;

⚙️ 取值

值	类型	描述
`<list-style-type> \|\| <list-style-position> \|\| <list-style-image>`	值	列表样式简写

▶ 示例

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

▶ 试一试

🌐 浏览器支持

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

提示： list-style:none 常用于导航栏等场景，去掉默认的列表标记。

提示： 简写中未指定的属性会使用默认值，因此 list-style:none 会同时清除 type 和 image。

❓ 常见问题

Qlist-style: none 和 display: block 有什么区别？

Alist-style: none 只移除列表项前的标记符号，li 仍是列表项，语义保留，读屏软件仍识别为列表；display: block 会把元素改成块级显示，可能影响语义和辅助技术对列表结构的理解。重置列表外观用 list-style: none 即可，不必改 display。

Qlist-style 简写的属性顺序有要求吗？

A没有严格顺序要求，浏览器按值类型自动区分，但推荐按 type、position、image 顺序书写，如 list-style: square inside none;。注意未指定的子属性会被重置为默认值，因此 list-style: none 会把 type 和 image 都清空。

Qlist-style: none 和 padding-left: 0 有什么区别？

Alist-style: none 只移除标记符号，浏览器默认的列表左缩进（约 40px 内边距）仍然存在；要让列表与正文完全对齐，通常需要 list-style: none; padding-left: 0; margin: 0; 三者配合。这也是重置 CSS 里的经典组合，横向导航菜单的列表就是这样去掉圆点和缩进的。

Qlist-style 简写会重置哪些子属性？

A简写会把未书写的子属性重置为默认值：type 为 disc、position 为 outside、image 为 none。因此先用 list-style-image 设了图片，再写 list-style: inside; 图片会被清掉。只想改一个子属性时，直接用对应的单独属性更安全。