html 列表订单类型如子列表

问题描述 投票:0回答:1

如何创建具有自定义起点和顺序的 html 列表,就像我将应用子列表一样,如下面的代码片段(但隐藏外部列表的编号)。

结果应该是这样的

1.1 Item
1.2 Item
1.3 Item

2.1 Item
2.2 Item
2.3 Item

取决于起点。

ol {
  counter-reset: section;
  list-style-type: none;
} 
li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}
 
  <ol start="2">
    <li>
      <ol>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ol>
    </li>
  </ol>

html css
1个回答
0
投票

你是说这个吗?

ol {
  counter-reset   : section;
  list-style-type : none;
} 
ol li::before {
  counter-increment : section;
  content           : var(--start) counter(section) ' ';
}
<ol style="--start: '2.';">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

© www.soinside.com 2019 - 2024. All rights reserved.