html - 带有字母数字和数字的html css样式有序列表？

Question

我们有一个有序列表

<ol>
    <li>something good</li>
    <li>even better</li>
    <li>possibly the best</li>    
</ol>

通常它会显示为：

1. 好东西
2. 更好
3. 可能是最好的

有没有办法让它显示为：

1。好东西

a2。更好

一个3。可能是最好的

然后下一个列表可能是：

b1。呜呜呜

b2。第二个列表项

谢谢.. 一般的问题是我想要一个字符和一个符号以及一个数字。

Answer 1

通过此页面搜索，我可以找到两个给我解决方案的答案。

CSS中的反增量

HTML 列表样式类型的破折号

重用我创建的那些适合您需要的小提琴之一：

http://jsfiddle.net/DDNEB/1/

对于列表，您需要：

ol {counter-reset: chapter 1; list-style: none;}

这允许您创建变量。然后：

ol li+li {counter-increment: chapter 1; list-style: none;}

将为每个 li 增加它最后：

ol li:before {content: "a" counter(chapter) ".";}​

之前的内容将创建指定的内容，在这种情况下 a （用 b 或其他内容更改）+ number + 。.

希望能帮助到你。

Answer 2

将此添加到您的 CSS

.A li:before 
   {
    content: "A";
   }
.B li:before 
   {
    content: "B";
 }

并将您的列表更改为以下内容：

<ol class="A">
    <li>something good</li>
    <li>even better</li>
    <li>possibly the best</li>    
</ol>
<ol class="B">
    <li>something good</li>
    <li>even better</li>
    <li>possibly the best</li>    
</ol>

Answer 3

这是一种方法......不是你想要的，但是......

<ol type="a">
    <li>
        <ol type="1" start="1">
            <li>something good</li>
            <li>even better</li>
            <li>possibly the best</li>
        </ol>
    </li>
    <li>
        <ol type="1" start="1">
            <li>something good</li>
            <li>even better</li>
            <li>possibly the best</li>
        </ol>
    </li>
</ol>

Answer 4

试试这个： http ://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex

Answer 5

将此添加到您的 CSS 中：

.A ol {list-style: none; counter-reset: chapter 1;}
.A ol li+li {counter-increment: chapter 1; list-style: none;}
.A ol li:before {content: "a" counter(chapter) ". ";}


.B ol {list-style: none; counter-reset: chapter 1;}
.B ol li+li {counter-increment: chapter 1; list-style: none;}
.B ol li:before {content: "b" counter(chapter) ". ";}

并且这样做：

<div class="A">
    <ol>
        <li>something good</li>
        <li>even better</li>
        <li>possibly the best</li>             
    <ol>
</div>
<div class="B">
    <ol>
        <li>something good</li>
        <li>even better</li>
        <li>possibly the best</li>           
    <ol>
</div>

点击这里！这也有效。