Question

我们有一个有序列表

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

通常它会显示为：

好事
更好
可能是最好的

有没有办法让它显示为：

A1。好事

A2。更好的

A3。可能是最好的

然后下一个列表可能是：

B1。 bla bla bla

B2。第二个清单项目

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

Answer 1

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

counter-increment in CSS

HTML list-style-type dash

重复使用我创建的适合您需求的小提琴：

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>

点击here！这也有效。

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

5 个答案: