给ol序号化个妆

893 阅读1分钟

ol的用法及相关属性

ol中编号类型如下: 

'a' 表示小写字母编号; 

'A' 表示大写字母编号; 

'i' 表示小写罗马数字编号; 

'I' 表示大写罗马数字编号;

 '1' 表示数字编号(默认值)。

是不是没有你想要的,👇

加个括号怎么样:

ol{      
    list-style-type: none;      
    counter-reset: sectioncounter; 
} 
ol li:before {      
    content: '('counter(sectioncounter) ') ';      
    counter-increment: sectioncounter; 
}

<ol>     
    <li>第一行</li>     
    <li>第二行</li>     
    <li>第三行</li> 
</ol>

先把ol自带的编号去掉,在每个li前面用css中的计数器counter()增加编号,counter-reset用来重置计数器,counter-increment为计数器增加值,content为编号的内容。

依次类推:

序号后面加“、”,content: counter(sectioncounter) '、 ';