重置計數器復位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值

回答

相關問題