42. 列表的嵌套与样式

本节目标：掌握列表嵌套的正确写法，学会用 CSS 属性控制列表样式，了解列表在实际项目中的常见用法。

前面三节学了三种列表类型。这一节说说怎么把它们嵌套起来，以及怎么用 CSS 控制外观。

列表嵌套的正确写法

嵌套列表时，内层列表必须放在外层 li 标签内部：

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>白菜</li>
      <li>萝卜</li>
    </ul>
  </li>
</ul>

关键点：内层 ul 是外层 li 的子元素，不是同级的。

混合嵌套

不同类型列表可以互相嵌套：

<ol>
  <li>项目一
    <ul>
      <li>子任务 A</li>
      <li>子任务 B</li>
    </ul>
  </li>
  <li>项目二
    <dl>
      <dt>术语</dt>
      <dd>解释说明</dd>
    </dl>
  </li>
</ol>

有序列表里嵌套无序列表，无序列表里嵌套定义列表，都是合法的。

list-style-type 属性

控制列表项前面的标记样式：

/* 无序列表 */
ul.disc { list-style-type: disc; }      /* 实心圆（默认） */
ul.circle { list-style-type: circle; }  /* 空心圆 */
ul.square { list-style-type: square; }  /* 实心方块 */
ul.none { list-style-type: none; }      /* 无标记 */

/* 有序列表 */
ol.decimal { list-style-type: decimal; }       /* 数字（默认） */
ol.lower-alpha { list-style-type: lower-alpha; } /* 小写字母 */
ol.upper-roman { list-style-type: upper-roman; } /* 大写罗马数字 */
ol.none { list-style-type: none; }             /* 无标记 */

list-style-position 属性

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

ul.inside { list-style-position: inside; }  /* 标记在内容区域内 */
ul.outside { list-style-position: outside; } /* 标记在内容区域外（默认） */

inside 会让标记和内容一起缩进，outside 则标记悬挂在外面。

list-style-image 属性

用自定义图片替代默认标记：

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

Tip

实际项目中更常用 background-image 来替代 list-style-image，因为后者不好控制位置和大小。

简写属性 list-style

三个属性可以合并写：

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

顺序：type、position、image。可以只写需要的部分。

实际应用：多级导航菜单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .menu > li {
      display: inline-block;
      position: relative;
    }
    .menu > li > a {
      display: block;
      padding: 10px 20px;
      text-decoration: none;
      color: #333;
    }
    .submenu {
      display: none;
      position: absolute;
      background: white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    .menu > li:hover .submenu {
      display: block;
    }
  </style>
</head>
<body>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品 A</a></li>
        <li><a href="#">产品 B</a></li>
        <li><a href="#">产品 C</a></li>
      </ul>
    </li>
    <li><a href="#">关于</a></li>
  </ul>
</body>
</html>

这个例子用无序列表实现了带下拉菜单的导航栏。核心思路：

外层 ul 用 list-style: none 去掉标记
一级菜单用 display: inline-block 横排
二级菜单默认隐藏，鼠标悬停时显示

实际应用：面包屑导航

<style>
  .breadcrumb {
    list-style: none;
    padding: 0;
  }
  .breadcrumb li {
    display: inline;
  }
  .breadcrumb li+li::before {
    content: " > ";
    color: #999;
  }
</style>

<ul class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">分类</a></li>
  <li>当前页面</li>
</ul>

用 CSS 伪元素在每个 li 前面加分隔符，实现面包屑效果。

小结

嵌套列表放在 li 内部
list-style-type 控制标记类型
list-style-position 控制标记位置
list-style-image 使用自定义图片
列表常用于导航菜单、面包屑等 UI 组件

下一节是模块五的回顾与测验。