有序列表CSS样式包括父级编号。

Question

我们希望使用CSS创建一个有序列表，其效果如下：

A.
A.1
A.2
B.
C.
C.1
C.2
C.2.1
C.2.2

您如何在子元素中包含父级索引，类似于以下示例？

- Savage

---

可能是HTML/CSS大纲编号的重复问题。 - Jukka K. Korpela

Answer 1

你需要使用CSS计数器。

示例（来自MDN）

CSS：

ol {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}
li:before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " ";   /* Adds the value of all instances
                                            of the section counter separated
                                            by a ".". */
}

HTML：

<ol>
 <li>Entry
 <li>Entry
 <li>Entry with subentries
  <ol>
    <li>Entry
    <li>Entry
    <li>Entry
    <li>Entry
  </ol>
 <li>Entry
 <li>Entry
 <li>Entry with subentries
  <ol>
    <li>Entry
    <li>Entry
    <li>Entry
    <li>Entry
  </ol>
</ol>

JSFiddle

翻译为：

{{链接1:JSFiddle}}

- Zeta

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。 - C. A. McCann

@C.A.McCann：别担心，我知道这个问题。但是，由于我在大约20分钟内无法打开stackoverflow.com，因此无法编辑我的答案。我猜测我的VPN出了一些问题。 - Zeta

知道就好，那是来自“低质量审核”页面的模板评论——你的答案因为有链接且内容很少而被选中。现在应该没问题了——感谢您对它的改进！ - C. A. McCann

谢谢。我在 jsfiddle 中添加了闭合的 </li> 标签，结果出现了问题，因为我们从所见即所得控件中获取了标记。有简单的解决方法吗？ - Savage

我的错，我把一些标签放错了位置。现在已经正常工作了。 - Savage

Answer 2

你应该使用CSS计数器^W3C规范（正如@Zeta所指出的），但这里有一种处理多层嵌套和拉丁计数器的方法..

ol{
    list-style: none;
}
ol.roman{
    counter-reset: roman;
}
ol.roman > li:before{
    counter-increment: roman;
    content: counter(roman, upper-latin)".";
    padding-right:5px;
}
ol.roman li ol{
    counter-reset: inner;
}
ol.roman ol li:before{
    counter-increment: inner;
    content: counter(roman, upper-latin)"."counters(inner,'.');
    padding-right:5px;
}

演示在 http://jsfiddle.net/gaby/nZQSF/

- Gabriele Petrioli

---

非常准确 - 当我意识到另一个答案没有使用我在问题中指定的字母字符时，我正忙着实现它。 - Savage

不错的解决方案，但在现实世界中，您总是会有多行项目，它看起来并不完美（计数器几乎变得不可见）。 - ViliusL