我可以获得父级的CSS计数器值吗？

Question

我需要实现以下列表样式:

01 Item 1
02 Item 2
    02a Item 2a
    02b Item 2b
03 Item 3

如何获取父项的计数器值以在:before子项的内容中使用？(上面例子中的02)

Answer 1

您使用两个不同的计数器:一个用于li父li项,一个用于子项.然后,在每个子项中li,counter()使用每个计数器连接多个函数,如下所示:

ol {
    counter-reset: item;
}

ol ol {
    counter-reset: subitem;
}

li {
    display: block;
}

/* First level of parent items */
li:before {
    content: counter(item, decimal-leading-zero) ' ';
    counter-increment: item;
}

/* Second level of subitems */
li li:before {
    /* counter(item) for the parents, counter(subitem) for the subitems */
    content: counter(item, decimal-leading-zero) counter(subitem, lower-alpha) ' ';
    counter-increment: subitem;
}

jsFiddle演示,在所有支持的浏览器:before和包括IE8 +的CSS2.1计数器中测试过

有用的阅读:W3C CSS2.1生成的内容规范,§12.4.1嵌套的计数器和范围