html - 带右括号的有序列表 (HTML) 小字母？

Question

有序列表的默认低字母列表类型使用点“.”。有没有办法使用右括号来代替 a)... b) ..等？

Answer 1

这是一个巧妙的解决方案。 (老实说，我对此感到惊讶。)CSS 有一个叫做 counters 的东西，您可以在其中设置，例如，每个标题的自动章节编号。稍作修改即可得到以下内容；您需要自己整理填充等。

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

<span>custom list style type (v1):</span>
<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>

适用于所有现代浏览器和 IE9+(可能还有 IE8，但可能有问题)。

更新:我添加了子选择器以防止嵌套列表选取父样式。 trejder 在评论中也提出了一个很好的观点，即列表项对齐也搞砸了。 article on 456bereastreet 有一个很好的解决方案，涉及绝对定位计数器。

ol {
    counter-reset: list;
}
ol > li {
    list-style: none;
    position: relative;
}
ol > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

<span>custom list style type (v2):</span>
<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>

Here is a jsFiddle 显示结果，包括嵌套列表。