5

我们希望使用 CSS 创建一个有序列表，如下所示：

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

你会如何像这样在孩子中包含父索引？

4

2 回答 2

7

您需要使用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

于 2012-12-12T14:20:34.053 回答
5

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

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/

于 2012-12-12T15:06:29.797 回答