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

Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?(有序列表能否使用 css 生成看起来像 1.1、1.2、1.3(而不仅仅是 1、2、3、...)的结果?)

问题描述

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

Can an ordered list produce results that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with CSS? So far, using list-style-type:decimal has produced only 1, 2, 3, not 1.1, 1.2., 1.3.

推荐答案

你可以使用计数器这样做:

以下样式表编号嵌套列表项为1"、1.1"、1.1.1"等.

The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.

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>

请参阅 嵌套计数器和范围了解更多信息.

See Nested counters and scope for more information.

这篇关于有序列表能否使用 css 生成看起来像 1.1、1.2、1.3(而不仅仅是 1、2、3、...)的结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！