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

Question

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

Answer 1

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

您可以使用 CSS counter() 中的第二个参数来更改它们的显示方式。您正在寻找 upper-alpha.

这是一个示例（您给定的 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>

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

Customizing headings in html to show some headings levels as letters rather than numbers

html

css

html-heading