我需要实现以下列表样式:
01 项目1 02 项目2 02a 项目2a 02b 项目2b 03 项目3如何获取父项的计数器值以在我的子项的
:before
内容中使用?(在上面的示例中为02)01 项目1 02 项目2 02a 项目2a 02b 项目2b 03 项目3如何获取父项的计数器值以在我的子项的
:before
内容中使用?(在上面的示例中为02)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+。
请参见this:在CSS中无法做到这样的事情,显然需要使用JavaScript,但据我所知,伪元素不在DOM中。 至于其他答案:他想要列表项之前出现的计数器的值。
不,CSS 不支持这样的“变量”。 你可以做的就是设置与父级相同的样式。
counter-increment
但是它输出的是01a 02b
而不是02a 02b
。 - xkeshav