Question

我很难在Confluence的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小提琴中查看：http://jsfiddle.net/9pJdS/2/

Answer 1

我最近发现这种行为是在CSS标准中定义的。

简而言之：counter-reset函数创建一个新的计数器实例并将其存储在父元素中。这就是为什么当封闭的div关闭时 - 实例消失了（从这个计数器的实例堆栈中删除），我们看到一个旧的值。

至于Confluence：我发布了一项改进https://jira.atlassian.com/browse/CONF-33241

Answer 2

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>

CSS counter-reset在div-s中不起作用

2 个答案: