如何设置li风格？ [英] How to set the li style?

问题描述

通常我使用li执行此操作：

 < ol class =d> 
< li>咖啡< / li> 
< li>茶< / li> 
< li>可口可乐< / li> 
< / ol> 
  

和我的风格设置为：

  ol.d {list-style-type：lower-alpha;} 
  

$ b b

，结果如下：

  a。咖啡
 b。茶
 c。可口可乐
  

但我想修改为了得到这样的结果：

 （a）Coffee 
（b）Tea 
（c）Coca Cola 
  

我如何这样做？谢谢你。

解决方案

那么你可以使用计数 - 相关性，但它们在某些浏览器（如旧版本的IE）中不能很好地支持。

  ol.d {
 counter-reset：item; 
} 
 
 ol.d li：before {
 content：'（'counter（item，lower-alpha）'）'; 
 counter-increment：item; 
} 
  

一些参考：

<上面的代码
UL>

的jsfiddle预览

W3C自动编号规范

SitePoint参考CSS的生成内容

usually I use li to do this:

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

and I style set to this:

ol.d {list-style-type:lower-alpha;}

and the result like this:

a. Coffee
b. Tea
c. Coca Cola

But I would like to modify in order to make the result like this:

(a) Coffee
(b) Tea
(c) Coca Cola

How can I do so? Thank you.

解决方案

Well you can use the counter-related properties, but they're not well-supported in some browsers (like old versions of IE).

ol.d {
    counter-reset: item;
}

ol.d li:before {
    content: '(' counter(item, lower-alpha) ') ';
    counter-increment: item;
}

Some references:

• jsFiddle preview of above code
• W3C spec on automatic numbering
• SitePoint Reference on CSS generated content

这篇关于如何设置li风格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！