列表样式技巧

列表是 HTML 的基本组成部分！它们在诸如博客文章中列出步骤、食谱中列出食材或导航菜单中的项目等方面非常有用。它们不仅提供了样式化的机会，而且还具有可访问性影响。例如，屏幕阅读器会宣布列表中的项目数量，以提供列表的一些上下文。

让我们在这里专注于列表的样式，主要是有序列表和无序列表（对我们朋友定义列表的冷落表示歉意），以及一些不寻常的样式情况。

基础知识

在您进行任何过于花哨的操作之前，请知道对于list-style-type，有一些设置可能可以满足您的初始需求。

中间的断裂

有序列表可以从您想要的任何数字start。

嵌套小数

反向的前 10 名列表

一个reversed属性即可完成。

图像项目符号

最好的办法是在伪元素上使用background-image。您可能会认为list-style-image是可行的方法，但它非常有限。例如，您无法定位它甚至调整其大小。

表情符号项目符号

手动挑选的“随机”顺序

value属性将设置列表项以使用与该位置相关的标记。

自定义文本计数器

可以使用伪元素来获得最大的控制权，但也有list-style-type: '-';。

内部与外部

使用list-style-position: outside;（默认值）可以使内容排列得更整齐，但列表标记在框外部呈现，因此您必须小心，不要将其剪掉。它们可能会超出浏览器窗口的边缘，或者overflow: hidden;将完全隐藏它们。此处最后两个示例有一个技巧可以模仿更整齐的对齐方式，同时在元素内部呈现。

彩色项目符号

这里有三种方法

1. ::marker（最新且最简单）
2. 经典的伪元素样式
3. background-image（此方法是 SVG 数据 URL，因此您可以从 CSS 中操作颜色）

分列列表

列数可以是自动的。

彩色圆圈数字

自定义循环列表符号

一次性可以使用list-style: symbols()完成，可重用集可以使用@counter-style创建，然后使用。请注意，在撰写本文时，这仅在 Firefox 中受支持。