HTML 如何显示具有嵌套计数器的有序列表

列表是一组相关信息的记录，用于以有序或无序形式在网页中显示数据或任何信息。列表用于将相关信息分组，以便它们清楚地相互关联并易于阅读。从结构角度来看，它们对生成结构良好、易于访问和易于维护的文档非常有益处。它们还很有用，因为它们提供了可以应用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设置为block display来使它像块级元素一样行为。

示例

在这个示例中，我们将使用display属性的block值来为<li>元素设置内容和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表格的副本，而不使用表格元素和对应的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>