CSS - 自定义列表，同时保持默认十进制计数器

Question

我正在制作一个自定义的 ol>li 看起来像这样

1 |列出内容

2 |列出内容

3 |列出内容

我引用了这篇文章：HTML + CSS: Ordered List without the Period?

但是，我无法让数字出现，并且在遵循标准数字计数时，它们需要不带句点出现。

这是我的代码：

#content ol > li:before{
    content: counter(customlistcounter) " |";
    counter-increment: customlistcounter;
    margin-left: -21px;
    float: left;
    width: 1em;
}
#content ol li{
    padding-left: 21px;

Answer 1

你错过了几个步骤来让它与 css 一起工作；主要添加：#content ol:first-child { counter-reset: customlistcounter;}。我设置了一个示例，您可以在这里看到它现在是如何正常工作的：http://jsfiddle.net/n5wx4/

就像另一张海报说的那样，尽管记住这只适用于较新的浏览器，因此 IE 6 和 7 已经过时了。