CSS list-style-type属性使用方法

当我们需要给HTML列表元素添加样式时，可以使用CSS的list-style-type属性来实现。这个属性定义了列表项符号的类型，可以用不同的值来改变列表项符号的类型。

常用值

list-style-type属性常用的值包括：

none：不显示列表项符号。
disc：默认值，使用实心圆点作为列表项符号。
circle：使用空心圆圈作为列表项符号。
square：使用实心正方形作为列表项符号。
decimal：使用数字作为列表项符号，从1开始依次递增。

还有其他一些可用的值，可以查看官方文档了解更多。

使用方法

可以通过以下两种方法来使用list-style-type属性。

1. 直接作用于`<ul>`或`<ol>`元素

可以通过直接作用于<ul>或<ol>元素来改变所有列表项符号的类型。例如，下面的代码将使用空心圆圈作为列表项符号：

ul {
  list-style-type: circle;
}

2. 作用于每个`<li>`元素

如果要为每个列表项单独指定列表项符号，可以将list-style-type属性应用于每个<li>元素。例如，下面的代码将列表项符号分别设置为实心圆点、空心圆圈、实心正方形：

ul li:nth-child(1) {   /* 第一个列表项为实心圆点 */
  list-style-type: disc;
}
ul li:nth-child(2) {   /* 第二个列表项为空心圆圈 */
  list-style-type: circle;
}
ul li:nth-child(3) {   /* 第三个列表项为实心正方形 */
  list-style-type: square;
}

在上面的代码中，我们使用了nth-child伪类来选择每个列表项。该伪类选择器能够根据指定的规则选择元素，详情可以查看官方文档。

示例

下面的示例演示了如何使用list-style-type属性改变HTML列表元素的列表项符号：

<!DOCTYPE html>
<html>
<head>
  <title>CSS list-style-type使用</title>
  <style type="text/css">
    ul {
      list-style-type: circle;
    }
    ol li:nth-child(1) {   /* 第一个列表项为数字1 */
      list-style-type: decimal;
    }
    ol li:nth-child(2) {   /* 第二个列表项为数字2 */
      list-style-type: decimal;
    }
    ol li:nth-child(3) {   /* 第三个列表项为数字3 */
      list-style-type: decimal;
    }
  </style>
</head>
<body>
  <h2>无序列表</h2>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
  </ul>

  <h2>有序列表</h2>
  <ol>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
  </ol>
</body>
</html>

在上面的代码中，我们将无序列表的列表项符号设置为了空心圆圈，将有序列表的前三个列表项符号设置为了数字1、2、3。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS list-style-type属性使用方法 - Python技术站