我正在努力进行计数器重置，重置似乎正在应用，但随后的值似乎会根据重置前的值增加。
<head>
<style>
ol.list-number2{
text-indent:10px;
}
ol{
list-style-type: decimal;
}
ol > li{
display:inline;
}
/* Set the base count at 0 */
body{
counter-reset:first 1 second 1;
}
/* Reset the count when the start class is available */
ol.list-start-number1:before{ counter-reset: first 0 second 0;}
ol.list-start-number2:before{ counter-reset: second 0; }
/* Prepend the ols with the counter and increment the counter */
.list-number1:before{
content:counter(first) ". ";
counter-increment: first 1;
}
.list-number2:before{
content: "1." counter(second) ". ";
counter-increment: second 1;
}
</style>
</head>
<body>
<div id="magicdomid25" class="ace-line">
<ol class="list-start-number1 list-number1"><li><span class="a9z">test</span></li></ol>
</div>
<div id="magicdomid21231236" class="ace-line">
<ol class="list-start-number2 list-number2"><li><span class="a9z">tesdfsdfsting</span> </li></ol>
</div>
<div id="magicdomid31231230" class="ace-line">
<ol class="list-number2"><li><span class="a9z">tessdfsdftyy</span></li></ol>
</div>
<div id="magicdomid26123" class="ace-line">
<ol class="list-number2"><li><span class="a9z">tessdfsdfting</span></li></ol>
</div>
<div id="magicdomid30" class="ace-line">
<ol class="list-number1"><li><span class="a9z">testyy should be two!</span></li></ol>
</div>
<!-- First list has ended -->
<div id="magicdomid30" class="ace-line">
<span>FEAR ME foo I am the resetter of counters</span>
</div>
<!-- Second list begins -->
<div id="magicdomid25" class="ace-line">
<ol class="list-start-number1 list-number1"><li><span class="a9z">I should be 1</span></li></ol>
</div>
<div id="magicdomid25" class="ace-line">
<ol class="list-start-number2 list-number2"><li><span class="a9z">I should be 1.1</span></li></ol>
</div>
<div id="magicdomid25" class="ace-line">
<ol class="list-number2"><li><span class="a9z"><b>I should be 1.2 but I'm not! :(</b></span></li></ol>
</div>
<div id="magicdomid25" class="ace-line">
<ol class="list-number2"><li><span class="a9z"><b>I should be 1.3 but I'm not! :(</b></span></li></ol>
</div>
<div id="magicdomid25" class="ace-line">
<ol class="list-number1"><li><span class="a9z"><b>I should be 2 but I'm not</b></span></li></ol>
</div>
</body>
fiddle :http://jsfiddle.net/E8XFK/85/
我想我误解了反继承的工作原理？
修改 DOM 不是这里的选项。
最佳答案
计数器是可继承的，这意味着它们遵循 css 继承风格——在顶部定义的计数器将在底部可见。它们在同一文档级别上也是可见的，即所有兄弟节点也将看到先前定义的计数器。 Counter-reset 创建一个新的命名计数器。 由于您具有 DIV > OL 类型结构，因此在 OL 级别定义的任何计数器在下一行的 DIV > OL 上都将不可见。 您在这里所做的基本上是在每一行上定义和使用新计数器，因此它们不会正确递增。正文样式定义全局计数器，它用于您不“重置”计数器的行，因此您会看到从“第二个”元素开始的不正确编号。
正确的解决方案是在行级别(具有 ace-line 类的 DIV)创建计数器，以便它们在行内和下一行中可见。
<div id="magicdomid25" class="ace-line list-start-number1">
<ol class="list-number1"><li><span class="a9z">I should be 1</span></li></ol>
</div>
fiddle :http://jsfiddle.net/E8XFK/92/
关于css - 重置计数器重置 CSS 值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15907322/