我想用 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 中实现此目的的正确方法是什么?