我能获取父级元素的CSS计数器值吗？

Question

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

01 项目1
02 项目2
    02a 项目2a
    02b 项目2b
03 项目3

如何获取父项的计数器值以在我的子项的 :before 内容中使用？（在上面的示例中为02）

- Colin

Answer 1

您使用了两个不同的计数器：一个用于

父级，另一个用于

子项。然后，在每个

子项中，使用每个计数器连接多个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和CSS2.1计数器的浏览器，包括IE8+。

有用的阅读资料：W3C CSS2.1生成内容规范，§12.4.1 嵌套计数器和作用域

- BoltClock

---

+1 对于 counter-increment 但是它输出的是 01a 02b 而不是 02a 02b。 - xkeshav

@diEcho: 已修复！再次感谢你早前指出的错误 :) - BoltClock

太棒了！您可以将任何列表样式应用于计数器，因此您可以使用“decimal-leading-zero”。感谢您的帮助。 - Colin

@Colin: 哦，对了，我漏掉了那个 :) 记得你可以通过点击它的复选标记来将答案标记为已接受。很高兴能帮助！你甚至可以说我对这个答案很感兴趣 ;) - BoltClock

Answer 2

请参见this：在CSS中无法做到这样的事情，显然需要使用JavaScript，但据我所知，伪元素不在DOM中。 至于其他答案：他想要列表项之前出现的计数器的值。

- Viruzzo

---

你无法通过JavaScript获取CSS计数器的值，但仍然可以使用CSS访问它。计数器是一个复杂的小东西，但请查看我的答案了解如何操作。 - BoltClock

我想我误解了问题，因为我认为需要能够读取计数器的值（因此需要 JavaScript）。问题中的“获取”误导了我（但公平地说，它仅标记为 CSS）。 - Viruzzo

Answer 3

不，CSS 不支持这样的“变量”。 你可以做的就是设置与父级相同的样式。

- Moe Sweet

---

错误，CSS 2.1计数器规范很强大。我的问题实际上是关于如何获得多个计数器实例的。有counter()和counters()函数。counters()返回完整的计数树，但您无法单独格式化树的每个分支的list-style-type。在我提出问题之前，我一直在错误的道路上使用counters()。 - Colin