当前位置：首页 > 文章列表 > 文章 > 前端 > OL和UL列表区别及样式自定义方法

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

2025-07-09 18:54:23 0浏览收藏

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

第一步
第二步
第三步

苹果
香蕉
橙子

和

list-style-image: 如果你不想用内置的标记，想用一张图片作为列表标记，就可以用这个属性。它接受一个URL，指向你的图片文件。

例如：list-style-image: url('path/to/your-marker.png');

list-style-position: 这个属性控制列表标记是位于列表项内容的“外部”（outside，默认）还是“内部”（inside）。outside意味着标记在内容块之外，内容会缩进；inside则意味着标记是内容的一部分，文本会环绕标记。

list-style: 这是一个简写属性，可以同时设置list-style-type、list-style-position和list-style-image。

例如：list-style: square inside url('path/to/marker.png');

当然，如果你想要更精细的控制，比如让标记和文本有不同的颜色，或者实现一些不规则的布局，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学习网公众号，给大家分享更多文章知识！