带有数字+字母的 HTML 复杂列表项

Question

如何实现:

  1. lorem ipsum
  2. lorem ipsum
 2a. lorem ipsum
  3. lorem ipsum
 4a. lorem ipsum

html:(我无法公开文本，所以我使用的是 lorem)

   <ol>
     <li>lorem ipsum 1</li> <--- 1
     <li>lorem ipsum 2 </li> <--- 2
     <li class="number-alpha">lorem ipsum 2a</li> <--- 2a
     <li>lorem ipsum 3</li> <--- 3
     <li class="number-alpha">lorem ipsum 4a</li> <--- 2a
   </ol>

如您所见，2a 与 4a 的情况不同，但我需要在一个有序列表中解决这两种情况，并使用 CSS 而不是 JS 或 Jquery。你有 2 和 2a 的原因是因为 2a 是 2 对于不同用户的特殊消息。它的 4a 而不是 3a 的原因是因为 4a 不是异常消息，而是它针对不同用户的信息(它需要显示在同一个列表中)

Answer 1

这就是我带来的(我必须承认我为这个感到非常自豪):

ul {
    counter-reset:yourCounter;
}
ul li {
  list-style:none;
}
ul li:not(.sub) {
    counter-increment:yourCounter;
}
ul li:before {
    content:counter(yourCounter) ". ";
}
ul li.sub:before, ul li.subskip:before {
    content:counter(yourCounter) "a. ";
}

<ul>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li class="sub">lorem ipsum</li>
  <li>lorem ipsum</li>
  <li class="subskip">lorem ipsum</li>
</ul>