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 demo，在所有支持:before和CSS2.1计数器的浏览器中测试过，包括IE8 +

有用的阅读：W3C CSS2.1 generated content spec, §12.4.1 Nested counters and scope

Answer 2

请参阅this：无法在CSS中执行此类操作，显然您需要使用JavaScript，但伪元素不在DOM中。至于其他答案：他想要在列表项之前出现的计数器的值。

Answer 3

不，CSS不支持这种“变量”的东西。您所能做的就是设置与父母相同的风格。

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

3 个答案: