相关疑难解决方法(0)

如何在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;
        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>
Run Code Online (Sandbox Code Playgroud)

但分段计数器不会增加。我不明白为什么以及如何解决这个问题。问题是:在 CSS 中实现此目的的正确方法是什么?

html css

3
推荐指数
1
解决办法
1604
查看次数

标签 统计

css ×1

html ×1