Question

- 我正在尝试为子子订单列表创建CSS。

- 我还想缩进每个子列表。

- 样式如何适用于每个标题，例如1,2和3

HTML

<ol>
  <li>Item
      <ol>
          <li>Item</li>
          <li>Item</li>
      </ol>
  </li>

  <li>Item          
       <ol>
          <li>Item</li>
          <li>Item
            <ol>
              <li>Item</li>
              <li>Item</li>
            </ol></li>
          <li>Item</li>
          <li>Item</li>
       </ol>
   </li>

   <li>item</li>
</ol>

要实现的输出

1. Item
    1.1 Item
    2.2 Item

2. Item
    2.1 Item
    2.2 Item
      2.2.1 Item
      2.2.2 Item
    2.3 Item
    2.4 Item

3. Item

CSS

这是我到目前为止所得到的：

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

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

Answer 1

将您的CSS更新为以下

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

供参考 - $set

HTML / CSS嵌套有序列表

1 个答案: