在 html 中自定义标题以将某些标题级别显示为字母而不是数字答案

【问题标题】：Customizing headings in html to show some headings levels as letters rather than numbers在 html 中自定义标题以将某些标题级别显示为字母而不是数字
【发布时间】：2022-01-24 17:24:22
【问题描述】：

2我想在 html 中将一些标题显示为字母而不是数字。

例如，如果我有以下 html 描述：

<h1>the first chapter</h1> 
<h2>the first sub-chapter</h2>
<h1>the second chapter</h1>

我明白了：

1 the first chapter
1.1 the first sub-chapter
2 the second chapter

有可能（例如通过使用 CSS）有类似的东西：

A the first chapter
A.1 the first sub-chapter
B the second chapter

【问题讨论】：

我不明白您如何获得显示的第一个输出。数字从何而来？然后，不清楚你在问什么。您想在标题前添加A 和B？通过什么算法？这似乎完全是任意的。请修改得更清楚。
而您的原始 HTML 有一些复杂的标签。第二个元素是 H1 还是 H2？
必须有一些代码可以创建这些编号，请您将其添加到您的问题中。

标签： html css html-heading

【解决方案1】：

我认为您的代码必须使用 CSS 计数器才能达到您显示的初始结果。

您可以使用 CSS counter() 中的第二个参数来更改它们的显示方式。您正在寻找上阿尔法。

这是一个示例（您给定的 HTML 带有更多的 h2 以显示它们的工作原理。

body {
  counter-reset: h1;
  font-family: sans-serif;
}

h1 {
  counter-reset: h2;
  counter-increment: h1;
}

h1::before {
  content: counter(h1, upper-alpha) ' ';
}

h2 {
  counter-increment: h2;
}

h2::before {
  content: counter(h1, upper-alpha) '.' counter(h2) ' ';
}

<h1>the first chapter</h1>
<h2>the first sub-chapter</h2>
<h2>the second sub-chapter</h2>
<h1>the second chapter</h1>
<h2>the first sub-chapter</h2>
<h2>the second sub-chapter</h2>

【讨论】：

非常感谢，我不知道计数器！