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

2022-01-30 00:00:00 html css

有序列表能否使用 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.

相关文章