我可以获得父计数器的CSS计数器值吗？ [英] Can I get the CSS counter value of the parent?

问题描述

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

I need to implement the following list style:

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

如何获取父项的计数器值我的子项目的：before 内容？ （我在上面的例子中为02）

How can I get the counter value of the parent to use in the :before content of my sub item? (02 in my above example)

推荐答案

你使用两个不同的计数器：一个用于 code>父项，一个用于 li 子项。然后，在每个 li 子项中，使用每个计数器连接多个 counter（）函数，如下所示：

You use two different counters: one for the li parents and one for the li subitems. Then, in each li subitem, concatenate multiple counter() functions using each counter, like this:

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;
}

$ b>

jsFiddle demo, tested in all browsers that support :before and CSS2.1 counters including IE8+

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

这篇关于我可以获得父计数器的CSS计数器值吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！