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

一尘不染

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

html

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

阅读 511

2020-05-10

共1个答案

一尘不染

您可以使用计数器来这样做：

以下样式表编号嵌套列表项，如“ 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>

2020-05-10