HTML Academy · 课时

嵌套列表与列表样式

Q: 「嵌套列表与列表样式」这节课中我会学到什么？

在列表中嵌套列表，并控制它们的外观。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在列表中嵌套列表，并控制它们的外观。

嵌套列表与列表样式 是 CoddyKit 上的免费 HTML Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

嵌套列表

列表可以嵌套在 <li> elements inside：

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

正确的嵌套方式

嵌套列表必须放在 <li> 元素中，即位于其中（inside），不能作为 <ul> 或 <ol> 的直接子元素：

<!-- WRONG: nested ul as direct child of outer ul -->
<ul>
  <ul>   <!-- INVALID -->
    <li>Item</li>
  </ul>
</ul>

<!-- CORRECT: nested ul inside li -->
<ul>
  <li>
    Parent item
    <ul>
      <li>Child item</li>
    </ul>
  </li>
</ul>

多级项目符号样式

浏览器会在每个嵌套层级应用不同的默认项目符号：

<ul>
  <li>Level 1 — disc (filled circle)</li>  <!--  • -->
  <ul>
    <li>Level 2 — circle (open circle)</li>  <!--  ○ -->
    <ul>
      <li>Level 3 — square</li>             <!--  ▪ -->
    </ul>
  </ul>
</ul>

使用 CSS 重置

使用 CSS 覆盖嵌套列表样式：

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style each level explicitly */
.nav > li > ul {
  padding-left: 1rem;
  list-style: disc;
}

带编号的嵌套列表

使用不同类型的嵌套有序列表：

<ol type="1">
  <li>Introduction
    <ol type="a">
      <li>Background</li>
      <li>Motivation</li>
    </ol>
  </li>
  <li>Methods
    <ol type="a">
      <li>Data collection</li>
    </ol>
  </li>
</ol>

使用 CSS 计数器进行自定义编号

使用 CSS 计数器创建自定义层级编号：

ol {
  list-style: none;
  counter-reset: level1;
}
ol > li { counter-increment: level1; }
ol > li::before { content: counter(level1) '. '; }

ol ol {
  counter-reset: level2;
}
ol ol > li { counter-increment: level2; }
ol ol > li::before {
  content: counter(level1) '.' counter(level2) ' ';
}

手风琴式导航模式

嵌套列表可以变成可展开的侧边栏导航：

<ul class="tree-nav">
  <li>
    <details>
      <summary>Frontend</summary>
      <ul>
        <li><a href="/html">HTML</a></li>
        <li><a href="/css">CSS</a></li>
      </ul>
    </details>
  </li>
  <li><a href="/backend">Backend</a></li>
</ul>

调整嵌套列表间距

使用 CSS 控制视觉缩进：

ul {
  padding-left: 1.5rem;  /* Controls indent at each level */
  margin: 0.5rem 0;
}

/* Tighter nested spacing */
ul ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

列表样式简写属性复习

组合使用所有列表样式属性：

/* Shorthand: type position image */
ul {
  list-style: square inside;
}

/* Longhand equivalents: */
ul {
  list-style-type: square;
  list-style-position: inside;   /* inside or outside */
  list-style-image: none;
}

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

使用 SVG 或表情符号作为列表标记：

ul.checklist {
  list-style: none;
  padding: 0;
}

ul.checklist li::before {
  content: '✓ ';
  color: #22c55e;
  font-weight: bold;
}

/* Or with a background SVG */
ul.icon-list li {
  padding-left: 2rem;
  background: url('/icons/arrow.svg') no-repeat 0 0.2em;
  background-size: 1rem 1rem;
  list-style: none;
}

嵌套列表的无障碍访问

嵌套列表和屏幕阅读器：

屏幕阅读器会播报嵌套层级和项目数量
过深的嵌套（4 个或更多层级）会令人困惑——最多保持 2 到 3 个层级
如果在外层列表上使用 list-style: none，请添加 role="list"

快速检查

嵌套列表必须放在外层列表的什么位置？

回顾：嵌套列表

嵌套列表要点：

将列表嵌套在 <li> 内——绝不要直接嵌套在 <ul> 中
浏览器默认按层级使用：实心圆 → 空心圆 → 实心方块
CSS 计数器可实现自定义的层级编号
为便于使用，请将嵌套控制在 2—3 层
使用 <details>+<summary> 创建可展开的嵌套导航

常见问题解答

「嵌套列表与列表样式」课时是免费的吗？

是的 — 「嵌套列表与列表样式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「嵌套列表与列表样式」这节课中我会学到什么？

在列表中嵌套列表，并控制它们的外观。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「嵌套列表与列表样式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy