自定義順序列表內容

Question

我希望能夠模仿我在立法法規中看到的有序列表格式。一個特點是，有時你會看到名單像這樣：

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

Answer 1

要在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/

你可以看看這個問題：

Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?

Answer 2

你可以使用僞元素::before和CSS counters

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>