CSS 列表样式完全解析：从 ul/ol 基础到自定义样式
一、认识 HTML 列表的两种基础类型
在 HTML 中，列表分为无序列表（ul）和有序列表（ol），两者的核心区别在于列表项的标记形式：
- 无序列表（ul）：默认标记为实心圆点（・），用于展示无顺序关系的项目，语法结构：
html
<ul><li>列表项1</li><li>列表项2</li> </ul> - 有序列表（ol）：默认标记为阿拉伯数字（1. 2.），用于展示有顺序关系的项目，语法结构：
html
<ol><li>第一步</li><li>第二步</li> </ol>
二、CSS 控制列表标记的核心属性：list-style-type
通过list-style-type属性，可修改列表项的标记样式，支持以下常用值：
1. 无序列表专用标记
| 属性值 | 显示效果 | 适用场景 |
|---|---|---|
disc | ● 实心圆点 | 常规无序列表 |
circle | ○ 空心圆点 | 需要弱化标记的场景 |
square | ▪ 实心方块 | 希望标记更醒目的场景 |
none | 无标记 | 制作导航菜单、纯文本列表 |
示例：将 ul 默认圆点改为方块
css
ul {list-style-type: square; /* 所有li标记变为实心方块 */
}
2. 有序列表专用标记
| 属性值 | 显示效果 | 适用场景 |
|---|---|---|
decimal | 1. 2. 3. | 常规有序列表 |
decimal-leading-zero | 01. 02. 03. | 编号补零（如章节编号） |
lower-roman | i. ii. iii. | 罗马数字小写 |
upper-roman | I. II. III. | 罗马数字大写 |
lower-alpha | a. b. c. | 小写字母 |
示例：将 ol 改为小写字母编号
css
ol {list-style-type: lower-alpha; /* 显示a. b. c. */
}
三、用list-style-image实现自定义图片标记
若需使用图标 / 图片作为列表标记，可通过list-style-image属性指定图片地址：
css
ul.custom-list {list-style-image: url('icon.png'); /* 替换默认标记为icon.png图片 *//* 建议搭配list-style-position属性调整位置（见下文） */
}
注意：图片标记会覆盖list-style-type的默认标记，若图片加载失败则回退到list-style-type的默认值。
四、控制标记位置：list-style-position
标记与列表项文本的相对位置分为两种：
inside（内联位置）：标记位于列表项文本的行内，文本会自动换行到标记下方，类似文本缩进。outside（外部位置）：标记位于列表项文本块之外，文本换行时与首行对齐（默认值）。
示例对比：
css
/* 内联位置：标记在文本行内 */
ul.inside {list-style-position: inside;
}/* 外部位置：标记在文本块左侧 */
ul.outside {list-style-position: outside;
}
五、复合属性list-style：一站式简写
list-style可同时设置标记类型、图片、位置三个属性，语法格式：
css
list-style: [list-style-type] [list-style-image] [list-style-position];
示例：将 ul 设置为无标记（none），标记位置为 inside
css
ul {list-style: none inside; /* 等价于分别设置三个属性 */
}
六、实战场景：常见列表样式修改
1. 去除列表默认样式（制作导航菜单）
css
ul.nav {list-style: none; /* 清除标记 */padding-left: 0; /* 清除浏览器默认的左内边距 */
}
2. 自定义有序列表编号起始值
配合 HTML 的start属性（如<ol start="5">从第 5 项开始），或通过 CSS 伪元素实现更灵活的编号（需结合counter()函数，适合进阶学习）。
3. 调整标记与文本的间距
通过margin或padding属性控制列表容器的内边距，例如：
css
ul {padding-left: 20px; /* 增大标记与文本的水平间距 */
}
七、浏览器默认样式与重置
不同浏览器对列表的默认样式（如ul的padding-left默认值）可能有差异，建议在 CSS 初始化时统一重置：
css
/* 重置列表默认样式 */
ul, ol {list-style: none;padding-left: 0;margin: 0;
}
总结：必记的 3 个核心知识点
- ** 无序列表（ul）** 用
disc/circle/square/none控制标记，** 有序列表（ol）** 用数字 / 字母 / 罗马数字等编号。 list-style: none是制作导航、纯文本列表的必备代码。- 标记位置
inside会让文本包裹标记，outside则保持标记独立。
通过灵活组合这几个属性，就能从基础列表进阶到复杂的自定义样式，后续还可结合flex/grid布局实现更丰富的列表效果！