Html CSS计数器增量未按预期工作_Html_Css

Html CSS计数器增量未按预期工作

html css

Html CSS计数器增量未按预期工作,html,css,Html,Css,我真的不明白为什么计数器不增加h3元素 h1 { 计数器复位：H2计数器； } h2：之前 { 内容：计数器（H2计数器）“.\0000a0\0000a0”；计数器增量：H2计数器；计数器复位：H3计数器； } h3：之前 { 内容：计数器（h2counter）““计数器（h3counter）”。\0000a0\0000a0”；计数器增量：H3计数器； } XXXX YYYY ZZZZ ZZZZ ZZZZ YYYY ZZZZ ZZZZ ZZZZ 我发现了一个例子，解释了一些类似的事情

我真的不明白为什么计数器不增加h3元素


h1
{
计数器复位：H2计数器；
}
h2：之前
{
内容：计数器（H2计数器）“.\0000a0\0000a0”；
计数器增量：H2计数器；
计数器复位：H3计数器；
}
h3：之前
{
内容：计数器（h2counter）““计数器（h3counter）”。\0000a0\0000a0”；
计数器增量：H3计数器；
}
XXXX
YYYY
ZZZZ
ZZZZ
ZZZZ
YYYY
ZZZZ
ZZZZ
ZZZZ

我发现了一个例子，解释了一些类似的事情，但问题是元素没有相同的直接父元素。这些都有

这是因为您在错误的位置应用了

计数器重置：h3counter

，即

h2:before

。您需要将

计数器重置：h3counter

应用于

标记，而不是它的

：before

h1{
计数器复位：H2计数器；
}
氢{
计数器复位：H3计数器；
}
h2：之前{
内容：计数器（H2计数器）“.\0000a0\0000a0”；
计数器增量：H2计数器；
}
h3：之前{
内容：计数器（h2counter）““计数器（h3counter）”。\0000a0\0000a0”；
计数器增量：H3计数器；
}


XXXX
YYYY
ZZZZZZ
ZZZZZZ
ZZZZZZ
YYYY
ZZZZZZ
ZZZZZZ
ZZZZZZ
这是因为您在错误的位置应用了计数器重置：h3counter
，即h2:before
。您需要将计数器重置：h3counter
应用于
标记，而不是它的：before


h1{
计数器复位：H2计数器；
}
氢{
计数器复位：H3计数器；
}
h2：之前{
内容：计数器（H2计数器）“.\0000a0\0000a0”；
计数器增量：H2计数器；
}
h3：之前{
内容：计数器（h2counter）““计数器（h3counter）”。\0000a0\0000a0”；
计数器增量：H3计数器；
}

XXXX
YYYY
ZZZZZZ
ZZZZZZ
ZZZZZZ
YYYY
ZZZZZZ
ZZZZZZ
ZZZZZZ
您不能在之前为您的h2
指令重置伪元素

h1{
计数器复位：H2计数器；
}
氢{
计数器复位：H3计数器；
}
h2：之前{
内容：计数器（H2计数器）“.\0000a0\0000a0”；
计数器增量：H2计数器；
}
h3：之前{
内容：计数器（h2counter）““计数器（h3counter）”。\0000a0\0000a0”；
计数器增量：H3计数器；
}
h1-1
h2-1
h3-1
h3-2
h3-3
h2-2
h3-1
h3-2
h3-3
您之前不能在伪元素中为您的h2
指令重置

h1{
计数器复位：H2计数器；
}
氢{
计数器复位：H3计数器；
}
h2：之前{
内容：计数器（H2计数器）“.\0000a0\0000a0”；
计数器增量：H2计数器；
}
h3：之前{
内容：计数器（h2counter）““计数器（h3counter）”。\0000a0\0000a0”；
计数器增量：H3计数器；
}
h1-1
h2-1
h3-1
h3-2
h3-3
h2-2
h3-1
h3-2
h3-3
在元素或其：：在
元素之前重置为什么重要？在元素或其：：在元素之前重置为什么重要？
<style>
h1
{
    counter-reset: h2counter;
}


h2:before
{
    content: counter(h2counter) ".\0000a0\0000a0";
    counter-increment: h2counter;
    counter-reset: h3counter;
}

h3:before
{
    content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
    counter-increment: h3counter;              
}
</style>

<html>
    <body>
        <h1>XXXX</h1>
        <h2>YYYY</h2>
        <h3>ZZZZ</h3>
        <h3>ZZZZ</h3>
        <h3>ZZZZ</h3>
        <h2>YYYY</h2>
        <h3>ZZZZ</h3>
        <h3>ZZZZ</h3>
        <h3>ZZZZ</h3>
    </body>
</html>