html - 如何使用 css 和 html 排序产生从 1.1、1.2、1.3(而不仅仅是 1、2、3)开始的结果的列表

Question

如何使用 css 和 html 排序产生看起来像 1.1、1.2、1.3(而不是仅仅 1、2、3 ……)的结果的列表？

到目前为止得到的输出为，

对于下面的代码，

HTML:

<ol>
<li>Lorem ipsum.</li>
<li>Excepteur sint occaecat cupidatat non proident:
    <ol>
        <li>sunt in culpa qui officia,</li>
        <li>deserunt mollit anim id est laborum.</li>
    </ol>
</li>
<li>Ut enim ad minim veniam.
    <ol>
        <li>Quis nostrud exercitation.</li>
        <li>Ullamco laboris nisi ut.
            <ol>
                <li>
                    Duis aute irure dolor
                </li>
            </ol>
        </li>
    </ol>
</li>

CSS:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li li {
  margin: 0;
}

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

但我需要得到结果，

JSfiddle

Answer 1

只需修改您的 HTML 以将所有列表包含在一个 li 元素中，如下所示:

<ol>
  <li class="parent">
      /** Your HTML **/
  </li>
</ol>

并添加以下 css 以隐藏第一个编号:

li.parent:before { content: ""; }

Here你可以找到演示。