跳至主要內容

列表与计数器

Kpsmart2025年3月2日大约 10 分钟

CSS列表与计数器

概述

CSS 列表与计数器是 CSS 中强大而灵活的功能，它们允许开发者自定义列表样式并创建自动编号系统。本文将详细介绍 CSS 列表样式属性和计数器的基本概念、实际应用以及最佳实践，帮助您创建更加丰富和动态的网页内容。

目录

基本概念

列表基础

HTML 提供了两种基本的列表类型：

  1. 有序列表（<ol>）：项目按特定顺序排列，默认使用数字标记
  2. 无序列表（<ul>）：项目没有特定顺序，默认使用项目符号标记

列表项使用 <li> 元素表示。

计数器基础

CSS 计数器是一种自动计数机制，可以跟踪元素在文档中出现的次数。计数器由以下 CSS 属性控制：

  • counter-reset：创建或重置计数器
  • counter-increment：递增计数器值
  • counter()/counters()：显示计数器的当前值

列表样式

基本列表样式属性

list-style-type

控制列表项标记的类型：

ul {
  list-style-type: disc; /* 默认实心圆点 */
}

ol {
  list-style-type: decimal; /* 默认数字 */
}

常用的 list-style-type 值：

值描述示例
disc实心圆点●
circle空心圆○
square实心方块■
decimal数字1, 2, 3
decimal-leading-zero前导零数字01, 02, 03
lower-roman小写罗马数字i, ii, iii
upper-roman大写罗马数字I, II, III
lower-alpha / lower-latin小写字母a, b, c
upper-alpha / upper-latin大写字母A, B, C
cjk-ideographic中日韩表意数字一, 二, 三
none无标记

list-style-position

控制列表项标记相对于列表项内容的位置：

ul {
  list-style-position: outside; /* 默认值，标记位于内容框外 */
}

ol {
  list-style-position: inside; /* 标记位于内容框内 */
}

list-style-image

使用图像作为列表项标记：

ul {
  list-style-image: url('bullet.png');
}

list-style 简写属性

组合上述属性的简写形式：

ul {
  list-style: square inside url('bullet.png');
  /* type position image */
}

自定义列表标记

使用 ::marker 伪元素自定义列表标记样式：

li::marker {
  color: red;
  font-weight: bold;
  content: "➤ ";
}

使用 content 属性和 ::before 伪元素创建自定义标记：

ul {
  list-style: none; /* 移除默认标记 */
}

li::before {
  content: "★";
  color: gold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

CSS 计数器

创建和重置计数器

使用 counter-reset 创建或重置计数器：

body {
  counter-reset: section; /* 创建名为 section 的计数器，初始值为 0 */
}

h2 {
  counter-reset: subsection; /* 每个 h2 元素重置 subsection 计数器 */
}

可以同时创建多个计数器，并设置初始值：

body {
  counter-reset: section 0 chapter 1; /* section 从 0 开始，chapter 从 1 开始 */
}

递增计数器

使用 counter-increment 递增计数器：

h2 {
  counter-increment: section; /* 每个 h2 元素将 section 计数器加 1 */
}

h3 {
  counter-increment: subsection; /* 每个 h3 元素将 subsection 计数器加 1 */
}

可以指定递增值：

h2 {
  counter-increment: section 2; /* 每个 h2 元素将 section 计数器加 2 */
}

显示计数器

使用 counter() 函数显示计数器值：

h2::before {
  content: "Section " counter(section) ": ";
}

h3::before {
  content: counter(section) "." counter(subsection) " ";
}

使用 counters() 函数创建嵌套计数器：

ol {
  list-style-type: none;
  counter-reset: item;
}

li {
  counter-increment: item;
}

li::before {
  content: counters(item, ".") " ";
  /* 生成如 1, 1.1, 1.1.1 等格式 */
}

计数器样式

可以为计数器指定样式，类似于 list-style-type：

h2::before {
  content: counter(section, upper-roman) ". ";
  /* 使用大写罗马数字：I, II, III, ... */
}

li::before {
  content: counter(item, lower-alpha) ": ";
  /* 使用小写字母：a, b, c, ... */
}

实际应用

自定义编号的文档大纲

创建自动编号的文档大纲：

<article>
  <h1>CSS 高级特性</h1>
  
  <h2>列表样式</h2>
  <p>列表样式的介绍...</p>
  
  <h2>CSS 计数器</h2>
  <p>计数器的介绍...</p>
  
  <h3>创建计数器</h3>
  <p>如何创建计数器...</p>
  
  <h3>使用计数器</h3>
  <p>如何使用计数器...</p>
  
  <h2>实际应用</h2>
  <p>实际应用的例子...</p>
</article>
article {
  counter-reset: section;
}

h2 {
  counter-reset: subsection;
  counter-increment: section;
}

h3 {
  counter-increment: subsection;
}

h2::before {
  content: counter(section) ". ";
  color: #2c3e50;
}

h3::before {
  content: counter(section) "." counter(subsection) " ";
  color: #3498db;
}

自定义多级列表

创建自定义多级列表：

<ol class="custom-list">
  <li>一级项目
    <ol>
      <li>二级项目</li>
      <li>二级项目
        <ol>
          <li>三级项目</li>
          <li>三级项目</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>一级项目</li>
</ol>
.custom-list {
  list-style: none;
  counter-reset: item;
}

.custom-list li {
  counter-increment: item;
  position: relative;
}

.custom-list li::before {
  content: counters(item, ".") " ";
  position: absolute;
  left: -1.5em;
  font-weight: bold;
}

.custom-list ol {
  list-style: none;
  counter-reset: none; /* 继承父级计数器 */
  margin-left: 1em;
}

自动编号的图表和表格

为图表和表格添加自动编号：

<figure>
  <img src="chart1.jpg" alt="销售数据">
  <figcaption>销售数据图表</figcaption>
</figure>

<figure>
  <img src="chart2.jpg" alt="用户增长">
  <figcaption>用户增长图表</figcaption>
</figure>
body {
  counter-reset: figure;
}

figure {
  counter-increment: figure;
}

figcaption::before {
  content: "图 " counter(figure) ": ";
  font-weight: bold;
}

自定义步骤指引

创建自定义步骤指引：

<div class="steps">
  <div class="step">
    <h3>注册账号</h3>
    <p>填写您的个人信息创建账号。</p>
  </div>
  <div class="step">
    <h3>验证邮箱</h3>
    <p>点击邮件中的链接验证您的邮箱。</p>
  </div>
  <div class="step">
    <h3>完善资料</h3>
    <p>添加头像和个人简介。</p>
  </div>
</div>
.steps {
  counter-reset: step;
}

.step {
  position: relative;
  padding-left: 50px;
  margin-bottom: 30px;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.step h3 {
  margin-top: 0;
}

高级技巧

多计数器协同工作

使用多个计数器创建复杂的编号系统：

body {
  counter-reset: chapter section figure table;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

figure {
  counter-increment: figure;
}

table {
  counter-increment: table;
}

h1::before {
  content: "第 " counter(chapter, cjk-ideographic) " 章：";
}

h2::before {
  content: counter(chapter) "." counter(section) " ";
}

figure figcaption::before {
  content: "图 " counter(chapter) "-" counter(figure) "：";
}

table caption::before {
  content: "表 " counter(chapter) "-" counter(table) "：";
}

条件计数

结合 CSS 选择器实现条件计数：

/* 只计数可见元素 */
.item:not(.hidden) {
  counter-increment: visible-item;
}

/* 只计数特定类型的元素 */
.item.important {
  counter-increment: important-item;
}

.summary::after {
  content: "共有 " counter(visible-item) " 个项目，其中 " counter(important-item) " 个重要项目";
}

计数器与 CSS 变量结合

结合 CSS 变量创建更灵活的计数系统：

:root {
  --counter-color: #3498db;
  --counter-size: 1.2em;
}

.section {
  counter-reset: item;
}

.item {
  counter-increment: item;
}

.item::before {
  content: counter(item);
  color: var(--counter-color);
  font-size: var(--counter-size);
}

/* 不同部分使用不同颜色 */
.section.primary {
  --counter-color: #e74c3c;
}

.section.secondary {
  --counter-color: #2ecc71;
}

动态列表样式

使用 CSS 选择器创建动态列表样式：

/* 基于列表项数量的样式 */
li:first-child::marker {
  color: green;
}

li:last-child::marker {
  color: red;
}

/* 交替样式 */
li:nth-child(odd)::marker {
  color: blue;
}

li:nth-child(even)::marker {
  color: purple;
}

浏览器兼容性

列表样式兼容性

特性ChromeFirefoxSafariEdge
基本列表样式完全支持完全支持完全支持完全支持
::marker 伪元素86+68+11.1+86+
自定义 ::marker 内容86+68+不支持86+

计数器兼容性

特性ChromeFirefoxSafariEdge
counter-reset2+1+3+8+
counter-increment2+1+3+8+
counter()/counters()2+1+3+8+

兼容性处理

对于不支持某些特性的浏览器，可以采用以下策略：

1. ::marker 伪元素兼容性处理

对于不支持 ::marker 伪元素的浏览器，可以使用 ::before 伪元素作为回退：

/* 现代浏览器使用 ::marker */
li::marker {
  color: blue;
  font-weight: bold;
}

/* 回退方案使用 ::before */
@supports not selector(::marker) {
  ul, ol {
    list-style: none;
  }
  
  li::before {
    content: "• ";
    color: blue;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }
  
  ol {
    counter-reset: list-item;
  }
  
  ol > li {
    counter-increment: list-item;
  }
  
  ol > li::before {
    content: counter(list-item) ". ";
  }
}

2. 计数器兼容性处理

CSS 计数器在现代浏览器中有良好的支持，但对于非常旧的浏览器，可以考虑以下方案：

  • 使用 JavaScript 动态生成编号
  • 在 HTML 中手动添加编号
  • 提供简化的样式作为回退

最佳实践

1. 语义化使用列表

始终根据内容的语义选择适当的列表类型：

  • 使用 <ul> 表示无序集合
  • 使用 <ol> 表示有序序列
  • 使用 <dl>, <dt>, <dd> 表示定义列表
<!-- 无序列表：项目顺序不重要 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<!-- 有序列表：顺序很重要 -->
<ol>
  <li>预热烤箱</li>
  <li>准备面糊</li>
  <li>倒入烤盘</li>
  <li>烘烤30分钟</li>
</ol>

<!-- 定义列表：术语和定义 -->
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页结构。</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，用于设计网页外观。</dd>
</dl>

2. 避免过度使用计数器

计数器功能强大，但过度使用可能导致代码难以维护：

/* 避免这样的复杂嵌套计数器 */
body {
  counter-reset: level1 level2 level3 level4 level5;
}

h1 {
  counter-increment: level1;
  counter-reset: level2;
}

h1::before {
  content: counter(level1) ". ";
}

/* 更多嵌套... */

3. 结合 HTML 属性与 CSS

利用 HTML 属性增强列表功能：

<!-- 使用 start 属性指定起始值 -->
<ol start="5">
  <li>第五项</li>
  <li>第六项</li>
</ol>

<!-- 使用 reversed 属性反向计数 -->
<ol reversed>
  <li>最后一步</li>
  <li>倒数第二步</li>
  <li>倒数第三步</li>
</ol>

<!-- 使用 value 属性指定特定值 -->
<ol>
  <li>第一章</li>
  <li value="5">第五章</li>
  <li>第六章</li>
</ol>

4. 保持可访问性

确保自定义列表和计数器不影响可访问性：

/* 保持视觉与语义一致 */
ol {
  list-style: none;
}

ol li {
  position: relative;
  padding-left: 1.5em;
}

ol li::before {
  content: counter(list-item);
  counter-increment: list-item;
  position: absolute;
  left: 0;
  /* 样式... */
}

/* 对于屏幕阅读器，保留语义 */
@media speech {
  ol {
    list-style: decimal;
  }
  
  ol li::before {
    content: none;
  }
}

5. 性能考虑

计数器在大型文档中可能影响性能，特别是嵌套计数器：

  • 限制计数器的嵌套层级
  • 仅在必要的元素上使用计数器
  • 考虑使用 CSS 变量简化复杂计数器逻辑

参考资源

总结

CSS 列表与计数器是创建结构化内容和自动编号系统的强大工具。通过本文介绍的技术，您可以：

  1. 自定义列表外观：使用 CSS 属性和伪元素创建独特的列表样式
  2. 实现自动编号：使用 CSS 计数器为各种元素添加自动编号
  3. 创建复杂的编号系统：使用嵌套计数器和多计数器协同工作
  4. 增强用户体验：通过视觉层次和结构提高内容的可读性和可用性

无论是创建文档目录、步骤指南、图表编号还是自定义列表，CSS 列表与计数器都能提供灵活而强大的解决方案，帮助您创建更加专业和结构化的网页内容。