Css全局计数器
Css全局计数器
提问于 2014-09-19 23:43:36
根据css spec (http://www.w3.org/TR/CSS21/generate.html#scope)，重置计数器会自动创建一个新的计数器实例。
我正在尝试解决这个问题，以便处理全局计数器，这些计数器在重置时不会考虑div树结构。
请参见下面的示例
css
body {
counter-reset: counter1 0 counter2 0;
}
.counter1 {
counter-increment: counter1;
counter-reset: counter2 0;
}
.counter1:before {
content: counter(counter1);
}
.counter2 {
counter-increment: counter2;
}
.counter2:before {
content: counter(counter1) ". " counter(counter2);
}<body>
<div>
<div class="counter1">Section 1</div>
<div class="counter2">SubItem 1.1</div>
</div>
<div>
<div class="counter2">SubItem 1.2</div>
</div>
<div>
<div class="counter2">SubItem 1.3</div>
</div>
<div>
<div class="counter1">Section 2</div>
<div class="counter2">SubItem 2.1</div>
</div>
<div>
<div class="counter2">SubItem 2.2</div>
</div>
</body>
有什么想法吗？
回答 1
Stack Overflow用户
发布于 2014-10-04 15:37:04
你需要这样的http://jsfiddle.net/9x492j2m/吗？
您可以将元素放在ul列表中。
<ul class="counter1">
<li>Section 1
<ul class="counter2">
<li>SubItem 1.1</li>
<li>SubItem 1.2</li>
<li>SubItem 1.3</li>
</ul>
</li>
<li>Section 2
<ul class="counter2">
<li>SubItem 2.1</li>
<li>SubItem 2.2</li>
<li>SubItem 2.3</li>
<li>Subitem 2.4</li>
</ul>
</li>
</ul>然后是CSS
.counter1 {
counter-reset: counter1;
list-style: none;
}
.counter1 li:before {
content: counter(counter1);
counter-increment:counter1;
color: #fff;
background: red;
}
.counter2 {
counter-reset: counter2;
}
.counter2 li:before {
content: counter(counter1)". " counter(counter2);
counter-increment:counter2;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25937699
复制相关文章
相似问题
腾讯云开发者
