如何设置李风格？

Question

通常我会用李来做这件事：

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

我的风格设置为：

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

结果如下：

a. Coffee
b. Tea
c. Coca Cola

但是我想修改以便得到这样的结果：

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

我该怎么办？谢谢。

Answer 1

您可以使用与counter相关的属性，但在某些浏览器（例如旧版本的IE）中它们不受支持。

ol.d {
    counter-reset: item;
}

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

一些参考文献：

• jsFiddle preview以上代码
• W3C spec on automatic numbering
• SitePoint Reference on CSS generated content

Answer 2

除了使用列表图像之外，您无法修改列表项的显示方式。如果你想这样做，你将不得不用额外的标记和边缘/定位技巧来模拟它。

Answer 3

抱歉，它未在list-style-type的默认CSS中设置。您可以参考https://developer.mozilla.org/en/CSS/list-style-type了解CSS提供的内容。

Answer 4

试一试：

ol { counter-reset: item }
li:before { content: "( " counter(item, upper-latin) " ) "; counter-increment: item }