OL和UL列表区别及样式自定义方法

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《ol和ul标签都是用于创建列表的HTML元素，但它们的用途和默认样式有所不同：1.

标签（有序列表）用于表示有顺序的列表，例如步骤、排名等。默认样式：列表项前会显示数字（1, 2, 3...）。示例：
1. 第一步
2. 第二步
3. 第三步
2.

标签（无序列表）用于表示无顺序的列表，例如项目、选项等。默认样式：列表项前会显示项目符号（通常是圆点）。示例：
• 苹果
• 香蕉
• 橙子
如何自定义列表样式？你可以使用 CSS 来修改

和

的样式，包括：列表项标记（数字、符号、图片等）缩进颜色背景色示例：自定义列表样式

当然，如果你想要更精细的控制，比如让标记和文本有不同的颜色，或者实现一些不规则的布局，list-style属性可能就不够用了。这时候，我们可以考虑将list-style-type设置为none，然后利用伪元素（::before或::marker）来创建和自定义标记。

有序列表（

）在哪些场景下更具优势？

在我看来，ol标签的价值在于它明确地传达了“顺序”或“步骤”的概念。它不仅仅是视觉上的编号，更是一种语义上的声明。想想看，当我们撰写一份食谱时，每一步骤的先后顺序是至关重要的；或者在技术文档中，安装软件的步骤，一步错可能导致步步错。

具体来说，ol标签适用于：

• 步骤指南或教程：比如“如何安装软件的五步曲”、“完成任务的三个关键步骤”。顺序在这里是不可逆的。
• 排名或排行榜：例如“全球十大最佳咖啡豆”、“最受欢迎的电影Top 5”。数字本身就代表了位置和优先级。
• 法律条文或规定：很多法规都是按条、款、项来编号的，这种结构性要求就非常适合ol。
• 议程或时间线：会议议程、项目里程碑，这些内容通常都有明确的时间或执行顺序。

使用ol，不仅能让读者清晰地把握内容的逻辑流程，对屏幕阅读器等辅助技术也更友好，因为它能准确地告诉用户这是一个有顺序的列表。我见过不少新手开发者，为了视觉效果，用ul然后自己手动加数字，这其实就丢失了HTML本身的语义优势，给后续的维护和无障碍化带来了不必要的麻烦。

无序列表（

）适用于哪些场景？

与ol强调顺序不同，ul则聚焦于“集合”或“分组”的概念，列表项之间是并列关系，没有先后之分。它的美在于简洁和概括性，能快速地呈现一组相关信息。

我经常在以下场景中使用ul：

• 功能列表或特性描述：比如一个产品的特点，每一点都是独立的，没有谁必须在谁之前。
• 导航菜单：网站的顶部导航、侧边栏菜单，这些都是一系列链接的集合，顺序通常不那么重要（虽然视觉上会有固定排列）。
• 项目符号列表：在文章中列举一些要点、注意事项，或者仅仅是为了让一大段文字看起来不那么密密麻麻，增加可读性。
• 相关链接或资源列表：比如一篇文章末尾的“延伸阅读”或“相关资源”，这些都是推荐内容，没有严格的阅读顺序。

ul的灵活性在于，你可以通过CSS轻易地改变它的项目符号，甚至完全移除它们，然后用其他视觉元素来替代，使其适应各种设计风格。它的默认样式虽然简单，但正是这种简单，让它成为了组织信息、提升内容可读性的万金油。我发现，很多时候，当你不确定该用ol还是ul时，如果内容的顺序真的不影响其含义，那么ul往往是更安全、更灵活的选择。

进一步自定义列表样式的进阶技巧有哪些？

当我们谈到“进阶”时，往往意味着要跳出list-style属性的固有框架，利用CSS更底层的能力来创造独特的列表样式。

一个非常强大的工具是伪元素（::before或::after）。通过将list-style-type设置为none，我们就可以完全控制列表项的标记。

ul.custom-list li {
    list-style-type: none; /* 移除默认标记 */
    position: relative; /* 为伪元素定位提供上下文 */
    padding-left: 25px; /* 为自定义标记留出空间 */
}

ul.custom-list li::before {
    content: "✨"; /* 可以是任何字符、表情符号，甚至是CSS计数器 */
    position: absolute;
    left: 0;
    top: 0; /* 根据需要调整垂直位置 */
    color: #FFD700; /* 标记的颜色 */
    font-size: 1.2em; /* 标记的大小 */
}

这种方法让你能够：

• 使用任何Unicode字符、表情符号甚至自定义图标（通过background-image和content: ""结合）作为标记。
• 精确控制标记的颜色、大小、字体、阴影等所有CSS属性。
• 将标记定位在列表项的任何位置，实现更复杂的对齐。

另一个相对较新且更语义化的方式是使用::marker伪元素。这个伪元素直接作用于列表项的默认标记。

ul.marker-styled li::marker {
    color: #007bff; /* 改变标记的颜色 */
    font-size: 1.5em; /* 改变标记的大小 */
    /* 甚至可以改变标记的 content，但兼容性不如 ::before 广泛 */
}

::marker的优势在于它直接操作原生的标记，语义更清晰，但它的可定制性目前还不如::before那么广泛，例如你不能直接改变其形状（只能改变list-style-type）。

对于更复杂的列表布局，比如需要多列显示列表项，或者列表项内部有非常规的对齐需求，我会倾向于使用Flexbox或CSS Grid。通过给ul或ol设置display: flex或display: grid，并配合flex-wrap、gap等属性，可以实现响应式的多列列表布局，或者让列表项内容与标记之间有更复杂的对齐关系，远超传统列表样式所能提供的能力。这就像是把列表项从单纯的“列表”概念中解放出来，变成可以自由布局的“元素”。

好了，本文到此结束，带大家了解了《OL和UL列表区别及样式自定义方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！