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

Question

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

1 | 列出内容

2 | 列出内容

3 | 列出内容

我引用了这篇文章：HTML + CSS：没有句点的有序列表？

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

这是我的代码：

#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 已退出。