有序列表是否可以使用 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、...)的结果?到目前为止，使用 list-style-type:decimal 只产生了 1、2、3，而不是 1.1、1.2.、1.3.

解决方案

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

<块引用>

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

OL { counter-reset: item }LI {显示:块}LI:before { content: counters(item, ".") " ";反增量:项目 }

例子

ol { counter-reset: item }li{显示:块}li:before { content: counters(item, ".") " ";反增量:项目 }

<li>li 元素<ol><li>sub li 元素</li><li>sub li 元素</li><li>sub li 元素</li></ol><li>li元素</li><li>li 元素<ol><li>sub li 元素</li><li>sub li 元素</li><li>sub li 元素</li></ol>

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

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.

解决方案

You can use counters to do so:

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 }

Example

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、...)的结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！