3

我正在努力进行计数器重置，重置似乎正在应用，但随后的值似乎会根据重置之前的值增加。

<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 不是一个选项。

4

1 回答 1

2

计数器是可继承的，这意味着它们遵循 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>

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

于 2013-04-11T15:13:31.313 回答