css - 如何在订单列表中创建订单列表？

Question

我需要在 HTML 订单列表中创建订单列表。

例如:

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

此代码在 View 中不起作用。 如何创建此 View :

1. Coffee
2. Tea
    2-1. Black tea
    2-2. Green tea
3. Milk

谢谢。

Answer 1

由于您需要为嵌套列表项使用自定义格式，因此您需要使用 CSS 计数器。

ol {
    counter-reset: item;
    list-style: none;
}
li:before {
    counter-increment: item;
    content: counter(item)". ";
}
ol ol li:before{
  content: counters(item,"-") ". ";
}

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>