列表嵌套 #

概述 #

列表嵌套是指在一个列表项中包含另一个列表，用于展示层级关系和复杂结构。

基本嵌套 #

无序列表嵌套 #

markdown 
- 一级项目
  - 二级项目
    - 三级项目
      - 四级项目

渲染效果：

  • 一级项目
    • 二级项目
      • 三级项目
        • 四级项目

有序列表嵌套 #

markdown 
1. 一级项目
   1. 二级项目
      1. 三级项目

渲染效果：

  1. 一级项目
    1. 二级项目
      1. 三级项目

缩进规则 #

空格缩进 #

使用 2 或 4 个空格进行缩进：

markdown 
2空格缩进：
- 一级
  - 二级
    - 三级

4空格缩进：
- 一级
    - 二级
        - 三级

保持一致 #

全文应使用统一的缩进方式：

markdown 
推荐：统一使用 2 空格
- 项目一
  - 嵌套项
    - 更深层

不推荐：混用缩进
- 项目一
  - 嵌套项
      - 更深层（缩进不一致）

混合嵌套 #

有序嵌套无序 #

markdown 
1. 第一步
   - 子项一
   - 子项二
2. 第二步
   - 子项一
   - 子项二

无序嵌套有序 #

markdown 
- 主类别
  1. 第一项
  2. 第二项
- 另一类别
  1. 第一项
  2. 第二项

多层混合 #

markdown 
1. 开发阶段
   - 前端开发
     1. 页面开发
     2. 接口对接
   - 后端开发
     1. API 开发
     2. 数据库设计
2. 测试阶段
   - 单元测试
   - 集成测试

列表项中的其他内容 #

包含段落 #

markdown 
1. 第一步

   这是第一步的详细说明。
   可以包含多个段落。

   段落需要正确缩进。

2. 第二步

   这是第二步的说明。

包含代码块 #

markdown 
1. 安装依赖

   ```bash
   npm install

  1. 配置项目

    javascript 
    module.exports = {
  port: 3000
};
text 

### 包含引用

```markdown
- 要点一

  > 这是引用内容

- 要点二

  > 这是另一个引用

包含表格 #

markdown 
1. 数据对比

   | 项目 | 值 |
   |------|-----|
   | A | 100 |
   | B | 200 |

2. 分析结果

复杂嵌套示例 #

项目结构 #

markdown 
- 项目根目录
  - src
    - components
      - Header
      - Footer
    - pages
      - Home
      - About
    - utils
      - helpers.js
      - constants.js
  - public
    - index.html
    - favicon.ico
  - tests
    - unit
    - e2e

技术架构 #

markdown 
1. 前端架构
   - 视图层
     - React 组件
     - Redux 状态管理
   - 网络层
     - Axios 请求封装
     - API 接口定义
   - 工具层
     - 工具函数
     - 常量定义

2. 后端架构
   - API 层
     - 路由定义
     - 控制器
   - 服务层
     - 业务逻辑
     - 数据处理
   - 数据层
     - 数据库操作
     - 缓存管理

学习路线 #

markdown 
- 前端基础
  1. HTML
     - 语义化标签
     - 表单元素
     - 多媒体
  2. CSS
     - 布局方式
     - 响应式设计
     - 动画效果
  3. JavaScript
     - 基础语法
     - DOM 操作
     - 异步编程
- 前端框架
  1. React
     - 组件化开发
     - Hooks
     - 状态管理
  2. Vue
     - 模板语法
     - 组合式 API
     - Pinia

嵌套深度建议 #

推荐深度 #

markdown 
推荐：最多 3-4 层
- 一级
  - 二级
    - 三级
      - 四级（最深）

过深嵌套的问题 #

markdown 
不推荐：嵌套过深
- 一级
  - 二级
    - 三级
      - 四级
        - 五级
          - 六级（太深，可读性差）

解决方案 #

拆分为多个列表或使用标题：

markdown 
## 主分类一

- 项目一
  - 子项一
  - 子项二

## 主分类二

- 项目二
  - 子项一
  - 子项二

常见问题 #

问题1：嵌套不生效 #

markdown 
错误：
- 一级
 - 二级（缩进不够）

正确：
- 一级
  - 二级（至少 2 空格）

问题2：列表中断 #

markdown 
错误：
- 一级
  - 二级

这里有内容，列表会中断

  - 三级（不会嵌套）

正确：
- 一级
  - 二级
  - 三级

问题3：代码块缩进 #

markdown 
- 列表项

  ```javascript
  // 代码块需要与列表项内容对齐
  const x = 1;
text 

## 最佳实践

### 1. 保持缩进一致

```markdown
- 使用统一的缩进（2 或 4 空格）
  - 二级项目
    - 三级项目

2. 合理控制深度 #

markdown 
- 最多 3-4 层嵌套
- 过深时考虑拆分或使用标题

3. 混合使用有序和无序 #

markdown 
- 分类使用无序列表
  1. 步骤使用有序列表
  2. 顺序重要时使用有序

4. 添加空行提高可读性 #

markdown 
1. 第一步

   详细说明...

2. 第二步

   详细说明...

嵌套列表对照表 #

父列表类型 子列表类型 缩进 示例
无序 无序 2空格 - → -
无序 有序 2空格 - → 1.
有序 无序 3空格 1. → -
有序 有序 3空格 1. → 1.

下一步 #

继续学习 链接语法！

最后更新：2026-03-24