Html 如何在css中嵌套多个计数器？_Html_Css

Html 如何在css中嵌套多个计数器？

html css

Html 如何在css中嵌套多个计数器？,html,css,Html,Css,我想用CSS嵌套两个不同的编号，以获得如下所示的自动编号： 1第1节 1-1子节1 1-2第1小节 2第2节 2-1第2小节 2-2子节2 以下是我实现这一目标的尝试： <head> <style> body { counter-reset: sectioncount; } h1:before { counter-increment: sectioncount 1; coun

我想用CSS嵌套两个不同的编号，以获得如下所示的自动编号：

1第1节

1-1子节1

1-2第1小节

2第2节

2-1第2小节

2-2子节2

以下是我实现这一目标的尝试：

<head>
    <style>
    body
    {
        counter-reset: sectioncount;
    }

    h1:before
    {
        counter-increment: sectioncount 1;
        counter-reset: subsectioncount;
        content: counter(sectioncount) " ";
    }

    h2:before
    {
        counter-increment: subsectioncount 1;
        content: counter(sectioncount) "-" counter(subsectioncount) " ";
    }
    </style>
</head>

<body>    
    <h1>Section1</h1>
    <h2>SubSection 1</h2>
    <h2>SubSection 2</h2>        
    <h1>Section2</h1>
    <h2>SubSection 1</h2>
    <h2>SubSection 2</h2>    
</body>


身体
{
计数器复位：分段计数；
}
h1：之前
{
计数器增量：sectioncount 1；
计数器重置：子分区计数；
内容：计数器（分段计数）“；
}
h2：之前
{
计数器增量：subsectioncount 1；
内容：计数器（分段计数）“-“计数器（分段计数）”；
}
第一节
第1款
第2款
第2节
第1款
第2款

但分段计数器不会递增。我不明白为什么以及如何解决这个问题。问题是：在CSS中实现这一点的正确方法是什么？

您可以使用CSS计数器来实现这一点：

这里有一个例子：

ol{
计数器重置：项目；
}
李{
显示：块；
}
李：以前{
内容：计数器（项目“-”）；
反增量：项目；
}


第一节
小节
小节
小节

李段
李段
小节
小节
小节

老实说，我不知道确切的原因，但在这种情况下，为主机元素（不是伪元素）设置计数器可以解决您的问题：

正文{
计数器复位：sectioncount子sectioncount；
}
h1{
计数器增量：sectioncount 1；
计数器重置：子分区计数；
}
h1：之前{
内容：计数器（分段计数）“；
}
氢{
计数器增量：subsectioncount 1；
}
h2：之前{
内容：计数器（分段计数）“-“计数器（分段计数）”；
}

第1节
第1款
第2款
第2节
第1款
第2小节

感谢您的回答，但我希望使用非嵌套标记实现它，就像我给出的示例中的h1和h2一样。据我所知，counters（）函数附加给定计数器的几个实例。我想使用不同的计数器。应该有办法做到这一点，对吗？我在给出的例子中就是这么做的。但它不起作用：第二个计数器不递增。也许是虫子？无论如何，我们可以按照myf的解释解决它。