定制訂單清單內容

Question

我希望模仿我在立法法規中看到的有序列表格式。 一個特點是有時您會看到如下列表：

(a) yadda
(b) yadda
(b-1) yadda
(b-2) yadda
(c) yadda
(d) yadda

Answer 1

您可以使用偽元素::before和CSS計數器

 ul { counter-reset: list, list2, list3; } li { list-style: none; counter-increment: list; } li::before { content: "(" counter(list, lower-alpha)")"; position: relative; left: -5px } li:nth-child(3) { counter-increment: list2 2 } li:nth-last-child(2) { counter-increment: list3 3 } li:nth-child(3)::before { content: "(" counter(list2, lower-alpha)"-1)"; } li:nth-child(4)::before { content: "(" counter(list2, lower-alpha)"-2)"; } 

 <ul> <li>Some text here</li> <li>Some more text here..</li> <li>Oh yeah, here's some pretty text</li> <li>Some text here</li> <li>Some more text here..</li> <li>Oh yeah, here's some pretty text</li> </ul> 

Answer 2

要在HTML中創建一個有序列表，您必須使用標簽<ol>來指定一個有序列表，並且每個項目都應為<li> “列表項”。

<ol>
  <li>yadda</li>
  <li>yadda</li>
  <li>
    <ol>
      <li>yadda</li>
      <li>yadda</li>
    </ol>
  </li>
  <li>yadda</li>
</ol>

請在此處查看示例：

https://jsfiddle.net/jruizx/pcs2mh4j/

您可以看一下這個問題：

有序列表可以使用CSS生成看起來像1.1、1.2、1.3（而不只是1，2，3，...）的結果嗎？