为有序列表编号< OL>。像一个数组，数字周围有方括号 [英] Numbering an ordered list <OL> like an array, with brackets around the numbers

问题描述

我有此列表：

<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

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

Now what I want is to have something like this:

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

理想情况下，我希望使用基于0的数组：

Ideally I want a 0-based array like:

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

我读过有关 CSS编号样式和 CSS列出了W3C草案，但我找不到能解决问题的解决方案。

I've read about CSS Numbering Style and CSS Lists W3C Draft but I cannot figure out a solution that works.

推荐答案

您可以做这样的事情：

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也不支持。

Keep in mind the o-counter (or whatever you call it) needs to be on the parent UL/OL for it to increment. And, IE7 does not support this either.

更多信息：

• < a href = http://www.w3.org/TR/CSS21/generate.html#counters rel = nofollow> http://www.w3.org/TR/CSS21/generate.html#counters


• http://css-infos.net/property / content

• http://www.w3.org/TR/CSS21/generate.html#counters
• http://css-infos.net/property/content

这篇关于为有序列表编号&lt; OL&gt;。像一个数组，数字周围有方括号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！