CSS 列表样式完全指南：从 list-style-type 到 list-style 简写

最新推荐文章于 2026-06-23 23:18:49 发布

原创最新推荐文章于 2026-06-23 23:18:49 发布 · 302 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #前端

话题

#从Copilot到Agent——我的开发工作流正在被颠覆

CSS 专栏收录该内容

8 篇文章

订阅专栏

在 HTML 中我们学过三种列表：无序列表 <ul>、有序列表 <ol>、定义列表 <dl>。早期可以通过 type属性修改无序/有序列表的项目符号，但在 CSS 时代，我们用 list-style-*系列属性来精细控制列表的标记样式——而且这套属性同时作用于有序和无序列表。

一、列表样式三大属性一览

所有列表样式属性都以 list-style-开头，可以拆成三个独立属性，也能用 list-style简写一次性声明。

属性	作用	常用值
`list-style-type`	项目符号/编号类型	`disc`、`circle`、`square`、`decimal`、`none`等
`list-style-image`	用图片作项目符号	`url(...)`或 `none`
`list-style-position`	项目符号位置	`inside`、`outside`

二、list-style-type：控制项目符号类型

常用取值

无序列表（`<ul>`默认 `disc`）：

disc—— 实心圆（默认）
circle—— 空心圆
square—— 实心方块
none—— 不显示任何标记

有序列表（`<ol>`默认 `decimal`）：

decimal—— 1, 2, 3…
decimal-leading-zero—— 01, 02, 03…
lower-roman/ upper-roman—— i/ii/iii 或 I/II/III
lower-alpha/ upper-alpha—— a/b/c 或 A/B/C
lower-greek—— α, β, γ…

MDN 还定义了大量多语言计数系统（日文、中文、韩文、亚美尼亚文等），实际开发用得少，需要时查文档即可。

💡 最重要的取值：`none`

实际开发中，绝大多数列表我们都会先把项目符号干掉。因为默认的圆点和编号往往和设计师给的稿子对不上，导航栏、商品列表、卡片列表基本全是 list-style-type: none。

/* 给所有 li 去掉项目符号（最常用写法之一） */
li {
    list-style-type: none;
}

/* 更常见的写法：直接干掉 ul/ol，影响所有子 li */
ul, ol {
    list-style-type: none;
}

⚠️ 注意：去掉符号后，<ul>/<ol>还有默认的 padding-left: 40px和 margin，如果要彻底重置，顺手加上：

ul, ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

三、list-style-image：用图片作项目符号（了解即可，不推荐）

li {
    list-style-image: url('./images/bullet.png');
}

为什么不推荐用这个属性

现代项目里 list-style-image基本被淘汰，原因有三：

尺寸不可控 —— 图片按原始像素渲染，不能 width/height缩放，小屏大屏都尴尬
对齐灾难 —— 多行文本时垂直居中调不动，和 list-style-position: inside组合尤其乱
路径和兼容性坑多 —— URL 相对的是 CSS 文件位置不是 HTML；图片加载失败时直接留白，不会 fallback 到 list-style-type；旧 Safari 不支持 SVG

✅ 现代替代方案

方案 A：`::marker`伪元素（Chrome 86+、Firefox 89+、Safari 15.4+）

li::marker {
    content: "➤";
    color: #4a90d9;
    font-size: 1.2em;
}

方案 B：`list-style: none`+ `::before`伪元素 + background（最灵活，可控尺寸/颜色/动画）

ul {
    list-style: none;
    padding-left: 1.5em;
}
ul li::before {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.5em;
    background-image: url('bullet.svg');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

四、list-style-position：标记位置（了解）

控制项目符号在文本流的哪一侧：

outside（默认）—— 标记在内容区外，多行文本换行后与首行对齐，传统列表观感
inside—— 标记算作内容第一个字符，多行文本会缩进到标记下方，紧凑布局用

li {
    list-style-position: inside;
}

📌 实际开发里这个属性用得不多，因为一旦 list-style: none就失效了；需要特殊排版时才碰。

五、list-style 简写：最实用的写法

因为三个属性都是 list-style-前缀，CSS 提供了简写，顺序固定：

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

任意值可省略，省略项取默认值（disc outside none）。

/* 完整写法 */
ul {
    list-style: square inside url('bullet.png');
}

/* 省略部分值，剩余用默认 */
ul {
    list-style: circle;              /* type=circle, position=outside, image=none */
    list-style: square url('x.png'); /* type=square, position=outside */
    list-style: inside;              /* type=disc, position=inside, image=none */
}

🏆 实战中最常用的只有一句

li {
    list-style: none;   /* 等价于 list-style: none outside none */
}

重置 CSS 里几乎必有这一行，导航、菜单、卡片列表全靠它。

六、无障碍小贴士

Safari/VoiceOver 在 list-style: none时会把 <ul>/<ol>从无障碍树的"列表"语义中移除。如果列表语义对你很重要（比如步骤指引、条款列表），记得补一个 role="list"：

<ul role="list" style="list-style: none;">
    <li>步骤一</li>
    <li>步骤二</li>
</ul>

总结口诀

三种列表：<ul>无序、<ol>有序、<dl>定义
三个属性：type管形状、image管图片（不推荐）、position管位置
一个简写：list-style，顺序 type position image
一句走天下：list-style: none —— 实际开发 90% 的场景
要自定义图标 → 用 ::marker或 ::before + background，别用 list-style-image

读者互动：

如果你觉得文章有待改进，请在评论区留言，我会认真考虑每一条建议。
如果觉得文章有帮助，欢迎点赞鼓励。
想与我共同进步，欢迎关注我。

💬 感谢各位读者的支持与关注！期待与大家一起在前端开发的道路上共同进步！🎉