有序列表能否使用 css 生成看起来像 1.1、1.2、1.3而不仅仅是 1、2、3、...的结果？

如何解决有序列表能否使用 css 生成看起来像 1.1、1.2、1.3而不仅仅是 1、2、3、...的结果？

您可以使用计数器来执行此操作：

以下样式表编号嵌套列表项为“1”、“1.1”、“1.1.1”等。

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

例子

ol { counter-reset: item }

li{ display: block }

li:before { content: counters(item, ".") " "; counter-increment: item }


<ol>

  <li>li element

    <ol>

      <li>sub li element</li>

      <li>sub li element</li>

      <li>sub li element</li>

    </ol>

  </li>

  <li>li element</li>

  <li>li element

    <ol>

      <li>sub li element</li>

      <li>sub li element</li>

      <li>sub li element</li>

    </ol>

  </li>

</ol>

有关详细信息，请参阅 嵌套计数器和范围 。

解决方法

有序列表能否使用 CSS 生成看起来像 1.1、1.2、1.3（而不仅仅是 1、2、3……）的结果？到目前为止，usinglist-style- type:decimal只生产了 1、2、3，而不是 1.1、1.2.、1.3。