javascript - CSS 计数器未在 Chrome 中更新

Question

我正在使用 CSS 计数器创建一组列表和副标题。这是 CSS

div.question {padding-left:2.5em; text-indent:-2.5em; counter-increment:item}
div.question:before {display:inline-block; width:2em; margin-right:0.5em; text-     align:right; content:counter(item, decimal)}
div.subheading {counter-increment:none; counter-reset:item}
div.subheading:before {display:inline-block;content:none}

类为“question”的 Div 应该有编号，而类为“subheading”的 div 应该没有编号并且应该将编号重置为零，因此下一个问题将为 1。

只要内容是静态的，这在我测试过的所有浏览器中都能正常工作。但是，如果我使用 javascript 将类从问题更改为副标题，Chrome 不会重置计数器。这在 Firefox (v19) 和 Internet Explorer 8 中运行良好

这里有一个 JSFiddle

http://jsfiddle.net/NW43P/1/

如您所见，静态加载的第一个副标题正确地重置了计数器。然而，动态生成的第二个标题未能重置计数器。

我不确定这是 chrome 中的错误还是我的代码有问题(我打赌是后者)，但有人知道修复方法吗？

感谢您的帮助

Answer 1

尝试重置 section 标签中的分段计数器并增加 section:before 中的计数器。这在 Chrome 中对我有用。

例子:

/* Header Numbering */

h1 {
    counter-reset: h2ctr; 
}

h1::before {
    counter-increment: h1ctr;
    content: counter(h1ctr) ". ";
}

h2 {
    counter-reset: h3ctr;
}

h2::before {
    counter-increment: h2ctr;
    content: counter(h1ctr) "." counter(h2ctr) " ";
}