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}

带有“问题”类的Div应该编号，而带有“subheading”类的div应该没有编号，并且应该将编号重置为零，所以下一个问题将是1.

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

中工作正常

这里有一个JSFiddle

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

正如您所看到的那样，静态加载的第一个子标题正确地重置了计数器。但是，动态生成的第二个标题无法重置计数器。

我不确定这是否是Chrome中的错误或我的代码有问题（我打赌后者），但有人知道修复？

感谢您的帮助

Answer 1

也许你不能编辑：before和：after伪元素？或者在页面加载后更改DOM时要修复，您可以考虑使用有序列表吗？而不是使用计数器元素？我想这也会少些代码？

Answer 2

尝试重置section标签中的subsection计数器并增加以下部分中的计数器：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) " ";
}

CSS计数器未在Chrome中更新

2 个答案: