我有这个清单:
<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 Numbering Style和CSS Lists W3C Draft但我无法找到有效的解决方案。
答案 0 :(得分:9)
您可以这样做:
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也不支持这一点。
更多信息:
答案 1 :(得分: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) "] ";
}