重置计数器重置CSS值_Css_List_Inheritance_Html Lists_Counter

重置计数器重置CSS值

css list inheritance

重置计数器重置CSS值,css,list,inheritance,html-lists,counter,Css,List,Inheritance,Html Lists,Counter,我正在努力进行计数器重置，重置似乎正在应用，但接下来的值似乎会根据重置之前的值递增 <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

我正在努力进行计数器重置，重置似乎正在应用，但接下来的值似乎会根据重置之前的值递增

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


ol.list-NUMBER 2{
文本缩进：10px；
}
ol{
列表样式类型：十进制；
}
ol>li{
显示：内联；
}
/*将基本计数设置为0*/
身体{
计数器复位：前1秒1；
}
/*当开始类可用时重置计数*/
ol.list-start-number1:在{计数器重置：前0秒0；}
ol.list-start-number2:在{计数器重置：第二个0；}之前
/*在ols前面加上计数器并递增计数器*/
.列表编号1：之前{
内容：计数器（第一个）”；
反增量：第一个1；
}
.列表编号2：之前{
内容：“1.“计数器（第二）”；
反增量：第二个1；
}
试验
测试
苔丝
镶嵌
testyy应该是两个
害怕我，因为我是计数器的重置者
我应该是1岁
我应该是1.1
我应该是1.2，但我不是(
我应该是1.3，但我不是(
我应该是2岁，但我不是

小提琴：

我想我误解了反继承是如何工作的

修改DOM在这里不是一个选项。

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


我应该是1岁

小提琴：