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/

CSS编号问题混合编号

1 个答案: