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

当

它为 0 时不显示无法从 CSS 中完成，也许可以从 javascript 中过滤掉它。

但这应该不难修复。尝试将主计数器的计数器增量和辅助计数器的计数器复位为 1 直接应用于 H1 标签，然后在 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/