Question

我无法理解为什么有些计数器可以工作，有些则不然。在下面的HTML中，目标是cnt3样式用于使用＆lt; h3＆gt;创建目录列表，该列表匹配后续＆lt; h2＆gt;头。我希望目录中的编号与＆lt; h2＆gt;的编号相匹配。头。而且我正在尝试使用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都出现问题，所以我认为这是我的代码而不是两个浏览器中的相同错误！

Answer 1

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

此属性也会运行级联规则。所以这里......

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

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

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

您的h2规则应如下所示

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

这里有JSBin正常工作

CSS反重置

1 个答案: