html - 创建特定类型css的有序列表

Question

是否可以像这样使用 html/css 创建有序列表：

<ol>
  <li>One</li>
  <li>Two</li>
</ol>

他们会在哪里呈现（包括括号）：

(1) One
(2) Two

Answer 1

是的你可以。试试下面的代码。它可能不适用于旧版本的 IE 或 Firefox。

更新：这是一个JSFiddle。

CSS：

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

HTML：

<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Answer 2

查看css 计数器。这是一个小提琴。

标记：

<ol>
  <li>One</li>
  <li>Two</li>
</ol>

CSS：

ol
{
    counter-reset: section; 
    list-style: none;
}
li:before
{
    counter-increment: section;
    content: "(" counter(section) ") ";    
}

Answer 3

请参阅以下 JSFiddle：http: //jsfiddle.net/VzEsr/

HTML

<ol>
  <li>One</li>
  <li>Two</li>
</ol>

CSS

ol {
    list-style: none;
    counter-reset: count 0;
}

ol li {
    counter-increment: count 1;
}

ol li:before {
    content: '(' counter(count) ')';
}