CSS计数器重置在div-s中不工作。
CSS计数器重置在div-s中不工作。
提问于 2014-04-10 14:25:49
我很难在汇流中的PDF导出中添加编号部分。
我可以设置几乎任何CSS样式，但我根本不能触发HTML。
这是我的CSS：
body {
counter-reset: x-chap x-sec;
}
h1:before {
content: counter(x-chap) '. ';
counter-increment: x-chap;
}
h1 {
counter-reset: x-sec;
}
h2:before {
content: counter(x-chap) '.' counter(x-sec) ' ';
counter-increment: x-sec;
}这里是HTML文档的结构--它与div-s连接在一起，它们使我的CSS无法工作，我不知道为什么：
<body>
<div>
<h1>H1-1</h1>
</div>
<div>
<h2>H2-1</h2> <!-- renders right: 1.1 H2-1 //-->
</div>
<div>
<h2>H2-2</h2> <!-- renders right: 1.2 H2-2 //-->
</div>
<h1>H1-2</h1>
<h2>H2-1</h2> <!-- renders right: 2.1 H2-1 //-->
<h2>H2-2</h2> <!-- renders right: 2.2 H2-2 //-->
<div>
<h1>H1-3</h1>
</div>
<div>
<h2>H2-1</h2> <!-- renders wrong: 3.3 H2-1 //-->
</div>
<div>
<h2>H2-2</h2> <!-- renders wrong: 3.4 H2-1 //-->
</div>
<h1>H1-2</h1>
<h2>H2-1</h2> <!-- renders right: 4.1 H2-1 //-->
<h2>H2-2</h2> <!-- renders right: 4.2 H2-2 //-->
</body>问题是，在3.1和3.2位置，H2被表示为3.3和3.4。
请在JS Fiddle：http://jsfiddle.net/9pJdS/2/中查看这个
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-11 06:05:21
我最近发现这种行为是在CSS标准中定义的。
简而言之:计数器重置函数创建计数器的一个新实例，并将其存储在父元素中。这就是为什么当封闭的div被关闭时--实例消失了(从这个计数器的实例堆栈中删除)，我们看到了一个旧的值。
关于汇合点:我发布了一个改进的https://jira.atlassian.com/browse/CONF-33241
Stack Overflow用户
发布于 2014-04-10 14:36:04
2.x和3.x的代码不匹配，请尝试：
<h1>H1-2</h1>
<h2>H2-1</h2>
<h2>H2-2</h2>
<h1>H1-3</h1>
<h2>H2-1</h2>
<h2>H2-2</h2>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22990925
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号