如何使用css实现标题的自动编号

Question

你能帮我用 css 自动编号来表示我的“标题标题”和“副标题标题”吗？因为我只需要使用 h1,h2 而不是 ol,ul,li 的标题...

这是我的代码：

<style>
h1,h2 {  display: list-item; list-style-position: inside; }
</style>


    <div id="page">
      <h1>Heading Title</h1>
      <h2>Subheading Title</h2>
      <h2>Subheading Title</h2>
      <h1>Heading Title</h1>
      <h2>Subheading Title</h2>
      <h1>Heading Title</h1>
  </div>

提前致谢

Answer 1

你能试试这个它会帮助你。

#page {
	counter-reset: heading;
}
h1:before {
	content: counter(heading)") ";
	counter-increment: heading;
}
h1 {
	counter-reset: subheading;
}
h2:before {
	content: counter(heading)"." counter(subheading)") ";
	counter-increment: subheading;
}

<div id="page">
  <h1>Heading Title</h1>
  <h2>Subheading Title</h2>
  <h2>Subheading Title</h2>
  <h1>Heading Title</h1>
  <h2>Subheading Title</h2>
  <h1>Heading Title</h1>
</div>