Question

我正在努力进行反复位，重置似乎正在应用，但随后的值似乎会根据重置前的值递增。

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

Answer 1

计数器是可继承的，这意味着它们遵循css继承样式 - 在顶部定义的计数器将在底部可见。它们也在同一文档级别上可见，即所有兄弟节点也将看到先前定义的计数器。计数器重置会创建一个新的命名计数器。既然你有DIV＆gt; OL类型结构，在OL级别定义的任何计数器将不会在下一行的DIV＆gt;上显示。 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/

重置计数器重置CSS值

1 个答案: