CSS 编号问题混合编号答案

【问题标题】：CSS-Numbering Issue Mixed NumberingCSS 编号问题混合编号
【发布时间】：2018-01-08 13:38:35
【问题描述】：

所以我在 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/ 是一个最小的例子，即使增量不起作用，前导零也是一个问题。这里有什么问题？

【问题讨论】：

您能否显示发生这种情况的minimal reproducible example？在您的示例中，不清楚为什么您不只使用 content: counter(H2) 而不是包含一个永远不会增加的计数器。
查看上面的更改
这是你想要的吗：jsfiddle.net/j3g6rjer/7
Thanx danield 解决了我的部分问题...
@reencode 你自己的问题是你试图维护四个不同的计数器，但由于没有 h1 类为“num”，计数器section 永远不会增加。此外，您在body 中重置section2，但不是section。你应该写body {counter-reset: section section2;}

标签： html css counter

【解决方案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/

【讨论】：