Html 如何停止<;部门>;标签干扰计数器?

Html 如何停止<;部门>;标签干扰计数器?,html,css,css-counter,Html,Css,Css Counter,在下面的代码中,我需要使用HTML顶部的div标记进行样式设置。如果没有div标记,则hx标记的轮廓编号是正确的,但是div标记就位后,一切都会完全错误。我需要像这样工作,但是div标记仍然存在,我需要它为具有不同ID的div工作。有什么想法吗 body{计数器重置:h1} h1{计数器复位:h2} h2{计数器复位:h3} h1:在{计数器增量:h1;内容:计数器(h1)“.”之前 h2:在{计数器增量:h2;内容:计数器(h1)“.“计数器(h2)”之前。} h3:在{计数器增量:h3;内

在下面的代码中,我需要使用HTML顶部的
div
标记进行样式设置。如果没有
div
标记,则
hx
标记的轮廓编号是正确的,但是
div
标记就位后,一切都会完全错误。我需要像这样工作,但是
div
标记仍然存在,我需要它为具有不同ID的div工作。有什么想法吗

body{计数器重置:h1}
h1{计数器复位:h2}
h2{计数器复位:h3}
h1:在{计数器增量:h1;内容:计数器(h1)“.”之前
h2:在{计数器增量:h2;内容:计数器(h1)“.“计数器(h2)”之前。}
h3:在{计数器增量:h3;内容:计数器(h1)“.”计数器(h2)“.”计数器(h3)“}之前

Lorem ipsum dolor sit amet,是一位杰出的献身者。
Morbi efficitur nibh metus,一种毛里斯-特里斯蒂克(mauris tristique ac.Duis ornare metus eget iaculis hendrerit)汽车

莫比·尼西·拉库斯(Morbi nisi lacus),艾米特·图尔皮斯(amet turpis a),阿利奎特·康格·努拉(aliquet congue nulla)。 两人一组

我们是一个伟大的领袖。 埃尼安在马蒂斯码头

无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇无侧唇。 威尼纳提斯普鲁斯大教堂大教堂

暂时中止欧盟精英的选举。 在苏黎世。不必担心,莫莱斯蒂·斯克利斯克·莫里斯(molestie scelerisque mauris)

欧盟turpis有效期(Vivamus eu turpis efficitur)、欧洲的ornare risus(ornare risus)和欧洲的Concertetur tellus(康塞特提特)。 这是一个很好的例子。

Duis eu nulla et tellus porttitor auctor。
考虑这一点(与您的结构非常相似,只是简单一点):

正文{
计数器复位:h1;
}
h1:在{
内容:计数器(h1)”;
反增量:h1;
}
h1{
计数器复位:h2;
}
h2:之前{
内容:计数器(h1)““计数器(h2)”;
反增量:h2;
}

标题第一级1
标题第二级1
标题二级2
标题二级3
标题二级4
标题二级5
标题一级2
试验
试验
试验
标题一级3

标题1第4级
通过了解计数器的创建、范围和继承,可以详细解释该行为的原因

计数器重置:计数器重置属性在元素上创建新计数器

计数器的作用域:计数器的作用域从文档中具有该计数器“计数器重置”的第一个元素开始

计数器继承:计数器及其值分别继承,可能来自不同的元素。如果元素有以前的同级,则它必须继承同级的所有计数器。否则,如果元素有父元素,它必须继承父元素的所有计数器。否则,元素必须有一组空计数器。然后,元素按文档顺序继承前一个元素的计数器值


为什么没有div的代码段可以工作? 在工作代码段(不带
div
)中,会发生以下情况:

  • counter.h1(添加前缀以区别于元素)在
    主体处创建(或重置),其初始值设置为0
    
  • 所有元素都继承其父元素的计数器,因此
    body
    中的每个元素都获得
    counter.h1
    。当遇到第一个
    h1
    时,
    counter.h1
    的值递增为1。当遇到下一个
    h1
    时,它从上一个元素继承计数器值,然后递增到2
  • counter.h2
    计数器在
    h1
    元素处创建,值设置为0。该值对
    h1
    的兄弟姐妹可见,他们都可以继承该值
  • 在这个代码段中,所有
    h2
    元素实际上都是
    h1
    元素的兄弟元素,因此每个
    h2
    元素都继承了
    counter.h2
    ,该计数器是在
    h1
    上创建的,并且只增加其值。因此,当遇到第一个
    h2
    计数器时,h2
  • 变为1,依此类推
  • h2
    元素类似,
    h3
    元素也是
    h1
    h2
    元素的兄弟元素,因此它们也继承
    counter.h1
    counter.h2
    。这就是为什么本示例中的编号保持正确
body{计数器重置:h1}
h1{计数器复位:h2}
h2{计数器复位:h3}
h1:在{计数器增量:h1;内容:计数器(h1)“.”之前
h2:在{计数器增量:h2;内容:计数器(h1)“.“计数器(h2)”之前。}
h3:在{计数器增量:h3;内容:计数器(h1)“.”计数器(h2)“.”计数器(h3)“}之前

标题1
段落

标题2 段落

标题3 段落

第2品目3 段落

第2标题2 段落

第3品目2 段落

第2品目1
如果没有div,您不能直接将类设置为
h1
吗?计数器对级别非常敏感。虽然我无法具体解释为什么
h2
计数器失败,但
h3
计数器在上述场景中工作,但最好像
body
本身一样重置所有计数器一次。“我没有添加答案,因为我无法解释为什么会发生这种情况”。@LcSalazar不幸的是,由于各种原因,我不能这样做。但我认为它会起作用。不幸的是,当第一个
h1
标记之外的任何内容位于
div
中时,它就会中断,请参见示例:。标题“Test”应该是2.1,而不是2.6。我必须说一件事。。。我认为在伪元素中操作是一种错误的方法,但实际上我可以看到(在W3C推荐中)