9

我有这个清单：

<ol start="0">
  <li>Tokyo Skytree</li>
  <li>Canton Tower</li>
  <li>CN Tower</li>
  <li>Ostankino Tower</li>
  <li>Oriental Pearl Tower</li>
</ol>

显示如下：

1. Tokyo Skytree
2. Canton Tower
3. CN Tower
4. Ostankino Tower
5. Oriental Pearl Tower

现在我想要的是有这样的东西：

[1] Tokyo Skytree
[2] Canton Tower
[3] CN Tower
[4] Ostankino Tower
[5] Oriental Pearl Tower

理想情况下，我想要一个基于 0 的数组，例如：

[0] = Tokyo Skytree
[1] = Canton Tower
[2] = CN Tower
[3] = Ostankino Tower
[4] = Oriental Pearl Tower

我已阅读有关CSS 编号样式和CSS 列表 W3C 草案的信息，但我无法找到可行的解决方案。

4

2 回答 2

10

你可以这样做：

ol {
  counter-reset: o-counter -1;
  list-style-type: none;
}
ol li:before {
  content: '[' counter(o-counter) '] = ';
  counter-increment: o-counter;
}

http://jsfiddle.net/userdude/Fb3ab/2/

请记住o-counter（或任何你称之为的）需要在父级UL/OL上才能增加。而且，IE7 也不支持这个。

更多信息：

于 2013-03-30T07:24:28.513 回答
2

你可以使用的counter属性是CSS。

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ol>  



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

http://codepen.io/Nunotmp/pen/duhAb

于 2013-03-30T07:31:51.900 回答