重置计数器复位CSS值

我很努力与计数器重置，重置似乎应用，但随后的值似乎增加基于重置前的值。重置计数器复位CSS值

<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>

小提琴：http://jsfiddle.net/E8XFK/85/

我想我误解了如何计数继承的作品？

修改DOM不是一个选项。

来源

2013-04-09 John McLear

计数器是可继承的，这意味着它们遵循css继承风格 - 在顶部定义的计数器将在底部可见。它们在相同的文档级别也是可见的，即所有的兄弟节点也会看到先前定义的计数器。反复位创建一个新的命名计数器。由于您有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>

小提琴：http://jsfiddle.net/E8XFK/92/

来源

2013-04-11 15:13:31 Dmitry

重置计数器复位CSS值

回答

相关问题