1

1.CSS选择器与类选择器

什么是CSS选择器？

CSS选择器用于选中HTML中的元素，并为这些元素应用样式。浏览器会根据选择器找到对应的元素，然后应用大括号 {} 内的样式规则。

类选择器（Class Selector）

类选择器是最常用、最灵活的选择器之一。

• 语法：以英文句点 . 开头，后面紧跟类名（自定义名称）。
• HTML中的使用：在元素的 class 属性中指定类名，多个类名可用空格分隔。
• CSS中的使用：.类名 { 样式规则 }

示例解析

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

• .circle 就是一个类选择器，它选中所有 class="circle" 的元素。
• 在你的HTML中，<ul class="circle"> 被这个选择器命中，因此该列表的标记类型变成了空心圆。

类选择器的特点

1. 可复用：同一个类可以应用于多个不同的元素，节省代码。
2. 可组合：一个元素可以拥有多个类，例如 class="circle square"，多个类名按顺序叠加样式（后面类名的样式会覆盖前面类名的相同属性）。
3. 无标签限制：类选择器不限制元素类型，你可以给任何元素添加类（如 <p class="circle">），虽然不一定有列表样式效果，但其他样式仍然生效。

---

2. CSS列表样式属性

CSS提供了专门控制列表标记样式的属性，主要用于 <ul>（无序列表）和 <ol>（有序列表）。

2.1 list-style-type

设置列表项标记的类型。

• 适用元素：<ul>、<ol>、<li>（通常设置在父级 <ul> 或 <ol> 上，会继承给子项）。
• 常用值（无序列表）：
  • disc（默认）：实心圆
  • circle：空心圆
  • square：实心方块
  • none：无标记
• 常用值（有序列表）：
  • decimal：数字（1, 2, 3...）
  • lower-roman：小写罗马数字（i, ii, iii...）
  • upper-roman：大写罗马数字（I, II, III...）
  • lower-alpha：小写英文字母（a, b, c...）
  • upper-alpha：大写英文字母（A, B, C...）

css

.lower-roman {
    list-style-type: lower-roman;
}

2.2 list-style-image

使用自定义图片作为列表项标记。

• 语法：list-style-image: url(图片路径);
• 注意事项：
  • 如果图片加载失败，浏览器通常会回退到 list-style-type 的默认样式。
  • 图片大小不会被自动缩放，最好使用与默认标记尺寸相近的小图标。
  • 与 list-style-type 同时存在时，list-style-image 优先级更高。

css

.fruit {
    list-style-image: url(img/apple.png);
}

• 它会尝试加载 img/apple.png 作为每个 <li> 的标记。
• 如果图片不存在或路径错误，则不会显示自定义图片（某些浏览器可能显示默认标记）。