CSS 将list-style-type应用到ul或li

在本文中，我们将介绍如何使用CSS将list-style-type属性应用到无序列表（ul）或列表项（li）。list-style-type属性用于设置列表项的标记类型，例如圆点、方形、数字等。

阅读更多：CSS 教程

使用list-style-type属性设置ul标记类型

要设置整个无序列表的标记类型，我们可以使用list-style-type属性。该属性可以应用于ul元素本身，也可以应用于设置ul元素的样式的CSS类。

下面是一个使用圆点标记的无序列表的示例：

<ul class="circle-list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

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

在上面的示例中，我们通过给ul元素添加一个名为circle-list的CSS类，并将list-style-type属性设置为circle，来显示带有圆点标记的无序列表。

以下是一些常用的list-style-type取值及其效果：

disc：圆点标记（默认值）
circle：空心圆标记
square：方形标记
decimal：十进制数字（1, 2, 3…）
decimal-leading-zero：前导零的十进制数字（01, 02, 03…）
lower-alpha：小写字母（a, b, c…）
upper-alpha：大写字母（A, B, C…）
lower-roman：小写罗马数字（i, ii, iii…）
upper-roman：大写罗马数字（I, II, III…）

使用list-style-type属性设置li标记类型

如果我们只想设置特定列表项的标记类型，而不是整个无序列表，我们可以使用list-style-type属性应用到li元素上。

下面是一个使用方形标记的列表项的示例：

<ul>
  <li class="square-item">列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

.square-item {
  list-style-type: square;
}

在上面的示例中，我们通过给列表项1添加一个名为square-item的CSS类，并将list-style-type属性设置为square，来显示带有方形标记的列表项1。

同样地，我们可以在li元素上应用其他list-style-type取值，以获得不同的标记样式。

通过CSS伪元素自定义列表项标记

除了使用list-style-type属性提供的预定义标记类型，我们还可以使用CSS伪元素在列表项上自定义标记。

例如，我们可以使用:before伪元素在列表项前添加自定义的装饰图标作为标记。下面是一个示例：

<ul class="custom-list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

.custom-list li:before {
  content: "";
  margin-right: 0.5em;
}

在上面的示例中，我们使用:before伪元素给列表项添加自定义标记。我们通过设置content属性为””来显示一个星星图标，并使用margin-right属性来添加一些间距。

通过使用不同的content值和CSS样式，我们可以创建各种自定义的列表项标记。

总结

本文介绍了如何使用CSS将list-style-type属性应用到无序列表（ul）或列表项（li）。我们可以通过设置ul元素的list-style-type属性来调整整个无序列表的标记类型，也可以使用list-style-type属性在li元素上设置特定列表项的标记类型。此外，我们还可以使用CSS伪元素在列表项上自定义标记。希望本文对你理解和使用list-style-type属性有所帮助。感谢阅读！