CSS 列表

HTML 提供了两种主要的列表类型：无序列表 (<ul>) 和有序列表 (<ol>)。CSS 允许我们对这些列表进行详细的样式化，包括改变项目符号的类型、位置，甚至使用自定义图片作为项目符号。

list-style-type

list-style-type 属性用于改变列表项标记的样式。

无序列表 (<ul>)

• disc: (默认) 实心圆点。
• circle: 空心圆。
• square: 实心方块。
• none: 不显示任何标记。

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

有序列表 (<ol>)

• decimal: (默认) 阿拉伯数字 (1, 2, 3, ...)。
• decimal-leading-zero: 带前导零的数字 (01, 02, 03, ...)。
• lower-roman: 小写罗马数字 (i, ii, iii, ...)。
• upper-roman: 大写罗马数字 (I, II, III, ...)。
• lower-alpha / lower-latin: 小写英文字母 (a, b, c, ...)。
• upper-alpha / upper-latin: 大写英文字母 (A, B, C, ...)。

ol.a {
  list-style-type: upper-roman;
}

ol.b {
  list-style-type: lower-alpha;
}

list-style-image

如果你想使用自定义的图片作为列表项的标记，可以使用 list-style-image 属性。

ul {
  list-style-image: url('sqpurple.gif');
}

list-style-position

list-style-position 属性指定列表项标记是出现在列表项内容的内部还是外部。

• outside: (默认) 标记位于文本块的左侧。文本的第一行会与标记对齐，但后续的换行文本不会。
• inside: 标记位于文本块的内部，就像是文本的第一个字符一样。所有文本行都会与标记对齐，形成整齐的左边界。

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

list-style (简写属性)

你可以使用 list-style 简写属性来一次性设置所有列表相关的样式。顺序是：

list-style: type position image;

ul {
  list-style: square inside url('sqpurple.gif');
}

如果设置了 list-style-image，那么 list-style-type 将作为图片无法显示时的后备选项。

移除默认样式

在实际开发中，一个常见的做法是完全移除列表的默认样式，然后使用其他技术（如 Flexbox 和伪元素）来创建完全自定义的列表样式。这提供了最大的灵活性。

要移除默认样式，你需要：

1. 将 list-style-type 设置为 none。
2. 将 margin 和 padding 都设置为 0，因为浏览器通常会为 <ul> 和 <ol> 元素添加默认的内外边距。

ul.custom {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

这样，你的列表就变成了一个“干净”的、由多个 <li> 组成的垂直堆叠的块级元素，你可以随心所欲地对其进行布局和样式化。