定制订单清单内容

Question

I'm hoping to mimic the ordered list formatting that I see in legislative statutes. One peculiarity is that you will sometimes see list such as this:

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

Answer 1

you can use pseudo-element ::before and 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> 

Answer 2

To create an ordered list in HTML you have to use the tags <ol> to specified a ordered list and every item should be a <li> "list item".

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

Please see an example here:

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

You can have a look at this question:

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