1

我无法理解为什么有些计数器有效，而有些则无效。在以下 HTML 中，目标是使用 cnt3 样式创建使用 <h3> 的目录列表，以匹配后续的 <h2> 标头。我希望目录中的编号与 <h2> 标题的编号相匹配。而且我正在尝试使用 CSS 计数器来做到这一点，而且大多数情况下它正在工作，但似乎我的目录的 h3s 计数器要么没有增加，要么经常重置，但我不知道为什么，我也没有弄清楚如何调试这个...... Mozilla Firebug 似乎告诉我反增量正在正确的地方使用，但它似乎对编号没有影响。显然，这是一个剥离的例子，只是为了演示这个问题，它出现在一个更大的文档中。

HTML

<h1>H1 Title</h1>
<h2>H2 Title</h2>
<h3 class="cnt3">H3 1</h3>
<h3 class="cnt3">H3 2</h3>
<h3 class="cnt3">H3 3</h3>
<h2 class="cnt">H2 Title 2</h2>
<h3 class="top">H3 4</h3>
<h3 class="top">H3 5</h3>
<h3 class="top">H3 6</h3>
<h2 class="cnt">H2 Title 3</h2>

CSS

h1 {
    counter-reset: h2s;
    text-align: center;
    font-size: 24pt;
}
h2 {
    font-size: 20pt;
    counter-reset: h3s;
    counter-reset: h3t;
}
h3 {
    font-size: 16pt;
    counter-reset: h4t;
}
h2.cnt:before {
    content: 'Section ' counter( h2s, decimal ) ': ';
    counter-increment: h2s;
}
h3.cnt3:before {
    content: 'Section ' counter( h3s, decimal ) ': ';
    counter-increment: h3s;
}
h3.top:before {
    font-size: 16pt;
    content: counter( h2s, decimal ) '.' counter( h3t, decimal ) ': ';
    counter-increment: h3t;
}
h4 { font-size: 13pt; }
h4.top:before {
    font-size: 16pt;
    content: counter( h2s, decimal ) '.' counter( h3t, decimal ) '.' counter( h4t, decimal ) ': ';
    counter-increment: h4t;
}

问题发生在 Firefox 和 Chrome 中，所以我想这是我的代码，而不是两个浏览器中的相同错误！

4

1 回答 1

4

您没有使用应该使用的方法。

级联规则也适用于此属性。所以在这里 ....

h2 {
    font-size: 20pt;
    counter-reset: h3s;
    counter-reset: h3t;
    }

您对属性的第二个定义覆盖了前一个。

当您为同一元素重置 2 个计数器时，应将它们一起指定，如下所示

您的 h2 规则应如下所示

h2 {
    font-size: 20pt;
    counter-reset: h3s h3t;
}

在这里你有一个工作正常的JSBin

于 2013-02-23T07:05:29.327 回答