如何显示带有嵌套计数器的有序列表?

htmlweb developmentfront end technology更新于 2025/3/26 22:36:17

列表是用于以有序或无序形式显示网页中数据或任何信息的简短相关信息的记录。列表用于将相关信息分组，使它们彼此清晰关联且易于阅读。从结构角度来看，列表非常有益，因为它们有助于创建结构良好、更易于访问且易于维护的文档。它们也很有用，因为它们提供了可应用 CSS 样式的专用元素。

HTML 列表使 Web 开发人员能够将相关项目集合组织成列表。 HTML 中有三种类型的列表，每种都有其自身的功能和含义。

无序列表 — 未按任何特定顺序排列的相关项目的集合。
有序列表 — 以任何特定顺序排列的相关项目的集合。
描述列表 — 术语及其描述的列表。

嵌套列表

嵌套列表或子列表是列表中的列表。在 HTML 中正确格式化嵌套列表的关键在于识别子列表是列表项的子项，而不是列表本身。

示例

我们可以按照以下示例创建一个简单的嵌套有序列表。

<!DOCTYPE html>
<html>
<body>
<h3>A Nested Ordered List</h3>
<h4>Icecreams</h4>
<ol>
  <li>Chocolate
    <ol>
      <li>Chocolate Chips</li>
      <li>Belgian Dark Chocolate</li>
    </ol>
  </li>
  <li>Vanilla</li>
  <li>Strawberry</li>
</ol>
</body>
</html>

但是，上述方法无法创建带有嵌套计数器的有序列表。

我们可以使用 CSS 的 display 属性来显示带有嵌套计数器的有序列表，例如 1.1, 1.2，而不是 1, 2。该属性指定了组件(div、超链接、标题、列表等)在网页上的放置方式。顾名思义，此属性用于定义网页各个部分的显示方式。

语法

display: value;

在此代码片段中，我们将讨论两种使用 display 属性创建带有嵌套计数器的有序列表的方法。

使用 Display 属性的" block "值

将 display 属性设置为 block 的元素将从新行开始，并占据整个屏幕宽度。对于此类元素，我们可以指定它们的宽度和高度。默认情况下，块级元素包括 <div>、<section>、<p> 等。我们可以将上述 HTML 代码中的 span 设置为块级显示，使其行为类似于块级元素。

示例

在此示例中，我们将使用 <li> 元素的 display 属性的 block 值以及 content 和 counter-increment 属性。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Display an Ordered List with Nested Counters?</title>
    <style>
      div{
          background-color:mistyrose;
          width:300px;
          padding:5px;
      }
      ol {
        counter-reset: item;
      }
      li {
        display: block;
        color: purple;
        font-size:17px;
      }
      li:before {
        content: counters(item, ".") "." " ";
        counter-increment: item;
      }
    </style>
  </head>
  <body>
    <h3>Beverages</h3>
    <div>
    <ol>
      <li>Coffee
        <ol>
          <li>Frappe</li>
          <li>Latte</li>
          <li>Cappuccino</li>
        </ol>
      </li>
      <li>Smoothie
      <ol>
          <li>Mango Smoothie</li>
          <li>Banana Smoothie</li>
        </ol>
      </li>
      <li>Mojito
        <ol>
          <li>Classic Mint Mojito</li>
          <li>Strawberry Mojito</li>
          <li>Blueberry Mojito</li>
        </ol>
      </li>
    </ol>
    </div>
  </body>
</html>

使用 Display 属性的"table"值

我们现在很少使用 table 值，但了解它仍然很有用。它在过去更有用，因为在浮动、Flex 和 Grid 出现之前，我们用它来布局。将 display 设置为 table 会使元素的行为类似于表格。因此，我们可以创建 HTML 表格的副本，而无需使用 table 元素以及相应的元素(例如 th、tr 和 td)。

示例

在此示例中，我们将 <li> 元素的 display 更改为"table"，并使用 :before 伪元素的"table-cell"值。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Display an Ordered List with Nested Counters?</title>
    <style>
      div{
          background-color:rosybrown;
          color:beige;
          width:250px;
          padding:10px;
      }
      ol {
        counter-reset: item;
        padding:2px;
      }
      li {
        display: table;
        counter-increment: item;
        margin-top:2px;
      }
      li:before {
        content: counters(item, ".") ". ";
        display: table-cell;
        padding-right: 10px;
      }
      li li:before {
        content: counters(item, ".") " ";
      }
    </style>
  </head>
  <body>
    <h3>Film Genres</h3>
    <div>
    <ol>
      <li>Comedy
        <ol>
          <li>Romantic Comedy</li>
          <li>Action Comedy</li>
        </ol>
      </li>
      <li>Drama
        <ol>
          <li>Legal Drama</li>
          <li>Political Drama</li>
          <li>Medical Drama</li>
        </ol>
      </li>
      <li>Thriller
        <ol>
          <li>Psychological Thriller</li>
          <li>Crime Thriller</li>
        </ol>
      </li>
    </ol>
    </div>
  </body>
</html>