重置计数器重置 CSS 值答案

【问题标题】：Resetting counter-reset CSS values重置计数器重置 CSS 值
【发布时间】：2013-04-09 16:23:24
【问题描述】：

我正在与计数器重置作斗争，重置似乎正在应用，但随后的值似乎根据重置之前的值增加。

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

【问题讨论】：

标签： css list inheritance html-lists counter

【解决方案1】：

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

【讨论】：