CSS编号问题混合编号

Question

因此，我有以下HTML头文件示例（例如<h1> class="roman">H1</h1> ）

I. H1
   a) H2
   b) H2
II. H1
   1. H2
   2. H2

另一个例子是

1. H1
   a) H2
   b) H2
2. H1
   2.1 H2
   2.2 H2

我在CSS上使用自动编号，而第二个示例运行良好，第一个示例得到的是

I. H1
   a) H2
   b) H2
II. H1
   0.1 H2
   0.2 H2

问题出在H2计数的前导0。 那是因为CSS计数器仍然为0，而我使用的是CSS计数器，例如

h2.num:before {
     content: counter(H1) "." counter(H2) " ";
     counter-increment: H2;
}

和

h1.al:before {
     content: counter(H1LR, lower-latin) ") ";  
     counter-increment: H1LR; 
}

有没有一种方法可以忽略计数器值为0的情况，或者有另一种方法可以做到这一点？

在这里https://jsfiddle.net/j3g6rjer/3/是一个最小的示例，其中即使增量不起作用，而且前导零也是个问题。 怎么了

Answer 1

从CSS不能完成不显示0的情况，也许是从javascript中过滤掉它。

但这并不难解决。 尝试将主计数器的计数器增量和辅助计数器的计数器复位直接应用于H1标签，然后将计数器的增量重置为1，然后在h2标签上将辅助计数器的计数器增量应用到计数器。

body {
    counter-reset: section;
}

h1 {
    counter-increment: section;
    counter-reset: subsection;
}

h1::before {
    content: counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

https://jsfiddle.net/b6hq8x5t/1/