理解无序列表（ul）与有序列表（ol）的核心区别及其默认表现
掌握 list-style-type、list-style-image 和 list-style-position 属性的用法
学会使用 list-style-type: none 移除默认标记，并结合伪元素实现自定义样式
了解 CSS 计数器（Counter）机制，能够创建复杂的自定义编号系统
遵循最佳实践，确保列表在层级结构和视觉设计上的一致性与可读性
在网页开发中，列表是组织信息最核心的工具之一。无论是导航菜单、功能特性介绍还是步骤说明，CSS 都能帮助我们打破浏览器的默认样式，打造出符合设计规范的列表效果。
CSS 主要支持两种基础列表类型：
无序列表 (<ul>)：默认使用实心圆点（disc）作为标记，适用于没有特定顺序的项目集合。
有序列表 (<ol>)：默认使用数字（1, 2, 3...）作为标记，适用于有严格逻辑顺序的内容，如教程步骤或排名。
通过 CSS，我们可以自由更改这些标记的样式、位置，甚至用自定义图片完全替代它们。
控制列表样式的属性主要集中在 list-style 系列上。以下是四个关键属性的详细解析：
这是最常用的属性，决定了列表前面的“子弹头”或编号样式。
常用值对照表：
修改无序列表为方块标记
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 列表标记示例</title>
<style>
/* 将默认的圆点改为实心方块 */
ul.square-list {
list-style-type: square;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h3>方块标记列表示例</h3>
<ul class="square-list">
<li>项目一：使用 square 属性</li>
<li>项目二：标记变为实心方块</li>
<li>项目三：保持整齐排列</li>
</ul>
</body>
</html>
在实际的企业级开发中，设计师往往要求完全自定义列表的样式，这就需要先移除浏览器默认的标记。
通过将 list-style-type 设置为 none，可以隐藏所有默认的点或数字。这常用于制作导航栏或需要完全自定义布局的列表。
无标记列表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>移除列表标记</title>
<style>
ul.no-bullets {
list-style-type: none; /* 关键：移除默认标记 */
padding-left: 0; /* 移除默认的左侧内边距 */
margin: 0;
}
ul.no-bullets li {
background: #f0f0f0;
margin: 5px 0;
padding: 10px;
border-left: 4px solid #007bff;
}
</style>
</head>
<body>
<ul class="no-bullets">
<li>第一项：自定义背景与边框</li>
<li>第二项：完全由 CSS 控制样式</li>
<li>第三项：无默认圆点干扰</li>
</ul>
</body>
</html>
对于有序列表，如果默认的 1, 2, 3 无法满足需求（例如需要 "Step 1:", "Step 2:" 或特殊的括号样式），可以使用 CSS 计数器（Counters）功能。这是一种比 list-style-type 更强大的方法。
实现原理：
counter-reset: 在父容器初始化一个计数器变量。
counter-increment: 在每个列表项 (li) 中增加计数器的值。
content: 在 ::before 伪元素中使用 counter() 函数显示当前的数值。
自定义步骤编号
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 计数器自定义编号</title>
<style>
ol.custom-steps {
list-style-type: none; /* 移除默认数字 */
counter-reset: step-counter; /* 初始化名为 step-counter 的计数器 */
padding-left: 0;
}
ol.custom-steps li {
counter-increment: step-counter; /* 每个 li 让计数器加 1 */
margin-bottom: 10px;
position: relative;
padding-left: 40px; /* 为自定义编号留出空间 */
}
/* 使用 ::before 伪元素插入自定义内容 */
ol.custom-steps li::before {
content: "步骤 " counter(step-counter) ":"; /* 显示 "步骤 1:" */
position: absolute;
left: 0;
top: 0;
font-weight: bold;
color: #d9534f;
background: #ffebeb;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.9em;
}
</style>
</head>
<body>
<h3>安装指南</h3>
<ol class="custom-steps">
<li>下载最新版本的安装包</li>
<li>运行安装向导并同意协议</li>
<li>选择安装目录并完成安装</li>
<li>重启系统以生效</li>
</ol>
</body>
</html>
除了改变标记的形状，我们还可以控制标记的位置以及使用图片作为标记。
outside (默认): 标记位于列表项内容框之外。如果文本换行，第二行文本会与第一行文本对齐，而不是与标记对齐。
inside: 标记位于列表项内容框之内。文本换行时，会环绕在标记下方。
可以使用 url() 指定一张小图标作为列表标记。
ul.image-list {
list-style-image: url('icon-check.png'); /* 使用对勾图标 */
list-style-position: inside; /* 可选：调整位置 */
}注意：在实际生产中，为了保证灵活性和高清屏适配，开发者更倾向于使用 background-image 配合 padding 和 ::before 伪元素来模拟图像标记，而不是直接使用 list-style-image。
在构建高质量的 Web 页面时，请遵循以下列表样式规范：
保持风格一致性：全站应定义统一的 ul 和 ol 基础样式，避免不同页面的列表长得五花八门。
层级缩进清晰：当列表嵌套时（列表中包含列表），务必通过 padding-left 或 margin-left 明确展示层级关系，提升可读性。
语义化优先：不要为了视觉效果而滥用 <div> 模拟列表。始终使用 <ul> 或 <ol> 标签，仅在 CSS 层面修改其外观，以保证无障碍访问（Accessibility）。
谨慎使用自定义标记：自定义的符号或图片应增强用户体验，而非造成困惑。确保标记与内容的对比度足够，且在移动端清晰可见。
当我们需要制作一个多级嵌套的有序列表，且希望第二级列表使用小写罗马数字（i, ii, iii），第三级使用小写字母（a, b, c），应该如何编写 CSS 选择器来实现？
在使用 list-style-position: inside 时，如果列表项内容非常长导致换行，视觉上会发生什么变化？这与 outside 有何不同，哪种情况更适合长篇阅读？
既然可以使用 list-style-image 直接设置图片标记，为什么在现代前端开发中，很多资深工程师更推荐使用 ::before 伪元素配合 background-image 来实现相同的效果？请从可控性和兼容性角度分析。