CSS列表是一种用于在网页上显示项目的方式，它包括有序列表（ol）和无序列表（ul），这两种列表都可以用来组织信息，使内容更易于阅读和理解。
1、有序列表（Ordered Lists）：
有序列表是一个项目按照特定的顺序排列的列表，每个列表项前面都有一个编号，编号可以根据CSS进行自定义。
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<h2>My Favorite Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</body>
</html>
在这个例子中，我们创建了一个无序列表，列表项是“Apple”，“Banana”和“Cherry”，默认情况下，每个列表项前面都会有一个圆点。
2、无序列表（Unordered Lists）：
无序列表是一个项目没有特定顺序的列表，每个列表项前面都是一个实心圆点，也可以通过CSS进行自定义。
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<h2>My Favorite Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</body>
</html>
在这个例子中，我们创建了一个无序列表，列表项是“Apple”，“Banana”和“Cherry”，默认情况下，每个列表项前面都会有一个实心圆点。
3、CSS列表样式：
CSS可以用来改变列表的外观，例如改变列表项前面的标记类型，改变标记的颜色，改变列表项的字体和颜色等。
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none; /* 移除默认的圆点 */
}
ul li::before { /* 在每个列表项前添加符号 */
content: "• "; /* 使用自定义的符号 */
color: red; /* 改变符号的颜色 */
}
</style>
</head>
<body>
<h2>My Favorite Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</body>
</html>
在这个例子中，我们移除了默认的圆点，然后在每个列表项前添加了一个红色的符号“•”，我们也可以使用其他的符号，只需要改变content的值即可。content: "○ ";会在每个列表项前添加一个实心的圆圈，我们还可以通过修改color属性来改变符号的颜色。