如何使用 list-style-type 设置有序列表和无序列表的标记

list-style-type 是 CSS 列表属性，用来指定列表项标记的样式。它既能把无序列表的圆点改成方块，也能把有序列表的数字改成字母、罗马数字或其他计数样式。本文介绍它的适用场景、常用值、边界条件和容易踩的坑，并提供可复制运行的代码。

一、它控制什么，不控制什么

HTML 中的列表由列表容器和列表项组成：无序列表通常使用 <ul>，有序列表通常使用 <ol>，列表项使用 <li>。浏览器默认会为列表项绘制标记，例如圆点或数字。

list-style-type 控制的是这个标记的类型。它不会创建列表项，也不会改变项目本身的文字内容。它同样不会改变 HTML 的语义：将一个 <ul> 设置为数字标记，不会让它变成有序列表；把 <ol> 设置为圆点，也不会取消其有序列表语义。

该属性可以写在列表容器上，也可以直接写在 <li> 上。写在容器上时，列表项会继承其值；需要单独调整某个项目时，则可以为该列表项指定不同的值。

<style>
  ul {
    list-style-type: square;
  }

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

  li.featured {
    list-style-type: "★ ";
  }
</style>

<ul>
  <li>普通项目</li>
  <li class="featured">重点项目</li>
</ul>

<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

上例中，普通无序列表项显示方块标记，重点项尝试使用自定义字符串，数字列表则使用大写罗马数字。自定义字符串的支持情况应结合目标浏览器测试；如果项目需要更广泛的兼容性，可以优先使用标准内置值，或采用后文的计数样式方案。

二、基本语法和常用取值

基本写法如下：

selector {
  list-style-type: 值;
}

常用的无序列表标记包括：

• disc：实心圆点，也是常见的默认样式。
• circle：空心圆点。
• square：实心方块。
• none：不绘制列表标记。

常用的有序列表标记包括：

• decimal：十进制数字，例如 1、2、3。
• decimal-leading-zero：十进制数字，小于 10 的数字前补零，例如 01、02。
• lower-alpha 或 lower-latin：小写拉丁字母，例如 a、b、c。
• upper-alpha 或 upper-latin：大写拉丁字母，例如 A、B、C。
• lower-roman：小写罗马数字，例如 i、ii、iii。
• upper-roman：大写罗马数字，例如 I、II、III。

在写作时，通常应根据列表的语义和读者预期选择样式，而不是仅凭视觉效果选择。例如，步骤、排名和需要按顺序引用的项目适合使用 <ol>；一组没有先后关系的要点适合使用 <ul>。标记样式不能替代正确的 HTML 结构。

下面是一个简单的完整示例。将代码保存为 list-marker.html，用浏览器打开即可查看效果：

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<title>list-style-type 示例</title>
<style>
  .features {
    list-style-type: square;
  }

  .steps {
    list-style-type: decimal-leading-zero;
  }

  .outline {
    list-style-type: upper-roman;
  }
</style>

<h2>功能</h2>
<ul class="features">
  <li>支持键盘操作</li>
  <li>适配窄屏布局</li>
</ul>

<h2>步骤</h2>
<ol class="steps">
  <li>填写资料</li>
  <li>确认信息</li>
</ol>

<h2>大纲</h2>
<ol class="outline">
  <li>背景</li>
  <li>方案</li>
</ol>
</html>

三、对列表整体设置，还是逐项设置

通常将样式写在 ul 或 ol 上，更容易维护，也能明确表达整组列表采用同一种标记：

ul {
  list-style-type: circle;
}

ol {
  list-style-type: decimal;
}

如果一个列表中确实需要不同类型的标记，可以给特定列表项添加类名。要注意，逐项混用数字、字母或图形标记，可能让读者误解项目之间的关系，宜仅在设计有明确理由时采用。

<style>
  .mixed-list {
    list-style-type: decimal;
  }

  .mixed-list .note {
    list-style-type: disc;
  }
</style>

<ol class="mixed-list">
  <li>主要步骤</li>
  <li class="note">补充说明</li>
  <li>后续步骤</li>
</ol>

在嵌套列表中，可以为不同层级分别设置样式，避免浏览器默认规则与页面设计不一致。例如，外层使用数字，内层使用小圆点：

<style>
  .nested {
    list-style-type: decimal;
  }

  .nested ul {
    list-style-type: circle;
  }
</style>

<ol class="nested">
  <li>准备
    <ul>
      <li>检查材料</li>
      <li>确认环境</li>
    </ul>
  </li>
  <li>执行</li>
</ol>

四、编号样式不等于编号规则

list-style-type 负责选择“用什么样子显示标记”，并不负责定义有序列表从几开始、顺序是否反转，也不负责为某个项目指定编号。原生有序列表的这些需求应优先使用 HTML 自身的属性。

例如，<ol start="5"> 可以指定起始序号，<ol reversed> 可以让序号反向排列，<li value="10"> 可以为某个列表项指定数值。这些属性控制的是有序列表的编号规则；CSS 再决定编号以十进制、字母还是其他形式呈现。

<style>
  .letters {
    list-style-type: upper-alpha;
  }
</style>

<ol class="letters" start="3">
  <li>第三项，显示为 C</li>
  <li>第四项，显示为 D</li>
</ol>

<ol reversed>
  <li>较前的项目</li>
  <li>较后的项目</li>
</ol>

需要准确表达步骤或项目序号时，尽量保留真实的 <ol> 结构，不要用普通文本、伪元素或背景图自行拼出看起来像编号的内容。原生结构对浏览器、辅助技术和后续维护更友好。

五、自定义标记与其他计数样式

CSS 的常用内置样式之外，还可以使用自定义计数样式。对于只需要一个简短装饰标记的场景，部分现代浏览器支持把字符串用作 list-style-type 的值，例如 list-style-type: "→ "。这类写法适合视觉上简单的标记，但不应在未经目标浏览器验证的情况下假设所有环境都能一致显示。字符串中的引号属于 CSS 语法；需要在 CSS 中表示引号或反斜杠时，应按 CSS 字符串规则转义。

如果要定义一套可复用的编号规则，可以使用 @counter-style。下面的例子定义一个以方括号包围十进制数字的样式：

<style>
  @counter-style bracketed-decimal {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    prefix: "[";
    suffix: "] ";
  }

  .custom-count {
    list-style-type: bracketed-decimal;
  }
</style>

<ol class="custom-count">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

@counter-style 可以描述计数系统、符号以及前缀和后缀等规则。不同计数系统适合不同用途，规则也有对应的语法要求；它不是把任意字符串自动转换为编号的通用机制。上线前应在目标浏览器中测试，尤其是需要覆盖旧浏览器、嵌入式 WebView 或特殊辅助技术环境时。对兼容性要求高的页面，使用 decimal、disc 等常见内置值通常更稳妥。

六、无标记列表与布局属性的边界

list-style-type: none 可以隐藏项目符号或编号，常见于导航菜单、选项卡列表或由其他视觉元素替代标记的列表。

.navigation {
  list-style-type: none;
}

它只处理标记，不负责调整列表缩进。标记所在位置、标记与内容的关系，以及列表容器的内外边距，可能还受到其他样式影响。页面需要精确控制位置时，应同时检查 list-style-position、padding 和 margin，而不是期待 list-style-type 完成所有布局工作。

ul {
  list-style-type: square;
  list-style-position: outside;
  padding-inline-start: 1.5em;
}

另外，list-style-type 是可继承属性。如果某个外层规则设置了列表样式，嵌套列表可能继承该值。遇到“内层列表的标记和预期不同”时，应检查祖先元素上的规则、选择器优先级以及是否存在后续覆盖，而不要只查看当前列表容器的样式。

七、无障碍与安全注意事项

列表标记往往只是视觉提示，不应承担唯一的信息传达任务。若颜色、形状或编号代表重要状态，建议同时在可读文本中说明。例如，不要只用红色圆点表示“必填”，应提供“必填”文字或其他清晰标签。这样在标记被隐藏、样式加载失败或读者使用辅助技术时，信息仍然可理解。

对使用 list-style-type: none 的导航列表，也应保留明确的链接文本、合理的 HTML 结构和可见的键盘焦点样式。不要因为视觉上不需要项目符号，就删除列表语义或把链接改成无法键盘操作的元素。不同辅助技术对列表的呈现方式会有差异，应按项目的无障碍要求实际测试。

从安全角度看，list-style-type 是样式属性，不是输入净化或内容安全机制。隐藏标记不能过滤列表项中的脚本、危险链接或其他不可信内容；同样，改变标记样式也不会让不安全内容变安全。若应用将用户提供的数据放入页面，仍需在适当的 HTML 上下文中进行安全处理，并遵循内容安全策略等防护措施。CSS 字符串标记也不应被当作承载可信业务数据的渠道。

八、常见错误排查

1. 给了属性却看不到标记。检查是否设置了 none，是否有其他 CSS 规则覆盖，以及列表标记是否被裁切或布局样式影响。
2. 把编号样式当作编号起点。upper-alpha 控制字母样式，不等同于设置起始编号；起点使用 start，单项数值使用 value。
3. 把无序列表改成数字后，以为语义也改变了。CSS 只改变呈现，列表的语义由 HTML 元素决定。需要顺序关系时应使用 <ol>。
4. 试图用该属性控制间距。它设置标记类型，不是缩进或项目间距属性。应检查 padding、margin 和 list-style-position。
5. 使用了浏览器不熟悉的自定义值。先确认 CSS 语法是否有效，再通过目标浏览器测试。重要编号不要依赖未经验证的自定义样式。
6. 样式隐藏了重要信息。若项目的顺序或状态对理解内容不可或缺，应确保信息不只存在于视觉标记中。

九、选择方式的简要建议

• 普通要点：使用 <ul>，再按设计选择 disc、circle 或 square。
• 步骤和序列：使用 <ol>，默认的 decimal 往往已经足够。
• 章节大纲：可考虑 upper-roman、lower-alpha 等样式，但要保证长列表仍容易阅读。
• 导航或自定义布局：可以隐藏默认标记，但要保留清晰的结构、文本和键盘交互。
• 特殊编号规则：先检查 HTML 的 start、reversed、value 是否能满足需求；需要自定义计数格式时，再评估 @counter-style 的支持情况。

总结来说，list-style-type 负责列表标记的视觉形式，适合统一调整圆点、数字、字母和其他计数样式。使用时应把它与 HTML 的列表语义、编号规则以及布局属性区分开；对于隐藏标记和自定义标记，还要兼顾浏览器兼容性、无障碍和真实信息表达。