CSS计数器:如果OL外部有包装器，则不重置
CSS计数器:如果OL外部有包装器，则不重置
提问于 2015-06-16 13:32:47
我尝试使用“OLCSS计数器”创建自定义有序列表( custom，简称这篇Mozilla文章 )，并以这篇Mozilla文章为例。
我需要稍微修改它，在一个名为.foo的DIV容器中包装最后一个OL，如这个jsFiddle所示。
<div id='foo'>
<ol>
<li>item</li> <!-- 1 -->
<li>item</li> <!-- 2 -->
</ol>
</div>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}添加包装器，计数器不再重置，数字从4.1和4.2继续。为什么？如何重置新计数器，即使包装在容器内？谢谢
回答 1
Stack Overflow用户
发布于 2015-06-16 13:41:43
将计数器重置添加到div，并为包装的ol分配一个新值。小提琴：http://jsfiddle.net/mbmg52sz/3/
ol{
counter-reset: sectionA;
list-style-type: none;
}
li::before {
counter-increment: sectionA;
content: counters(sectionA,".") " ";
}
div{
counter-reset: sectionA;
}
div > ol{
counter-reset: sectionB;
}
div > ol > li{
counter-increment: sectionB;
content: counters(sectionB,".") " ";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30869121
复制相关文章
相似问题
腾讯云开发者
