使用 <ol class> 在同一行生成字母和数字

Question

有没有办法使用 ol class 来生成输出，如下面的测验格式。

1. 你好
2. 乙再见
3. C 再见
4. D 很棒

我可以输出一个或另一个，但不能一起输出。我知道你不能使用 两个 classes...

<style>
    ol.o {
        list-style-type: upper-alpha;
    }
    li {
        list-style-type: decimal;
    }
</style>

 <ol class="o">
                  
                        <li>@QuizItem.Option1</li>
                        <li>@QuizItem.Option2</li>
                        <li>@QuizItem.Option3</li>
                        @if (QuizItem.Option4 != null)
                        {
                            <li>@QuizItem.Option4</li>
                        }
                        @if (QuizItem.Option5 != null)
                        {
                            <li>@QuizItem.Option5</li>
                        }
                  
                    </ol>

我怎样才能做到这一点？

Answer 1

有 CSS 个计数器

ol {
  counter-reset: listStyle;
}

ol li {
  margin-left: 1em;
  counter-increment: listStyle;
}

ol li::before {
  margin-right: 1em;
  content: counter(listStyle, upper-alpha);
}

<ol>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ol>