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>

Answer 2

试试这个。您需要将父div定义为<div id="page"> <div class="top-list"> <h1>Heading Title</h1> <div class="inner"> <h2>Subheading Title</h2> <h2>Subheading Title</h2> </div> </div> <div class="top-list"> <h1>Heading Title</h1> <div class="inner"> <h2>Subheading Title</h2> </div> </div> <div class="top-list"> <h1>Heading Title</h1> </div> </div>，将其子项定义为{{1}}

{{1}}

{{1}}

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

2 个答案: