使用 CSS 对 h1、h2、h3 进行编号，并带有文章标签

Question

我有这样的代码，其中 HTML 是由 hieroglyph，CSS 由我：

<html>
<head>
<style>

body {
    counter-reset: chapter 3 section 0;
}

h2 {
    counter-reset: slide 0;
    counter-increment: section;
}
h3 {
    counter-increment: slide;
}


h1:before {
    content: counter(chapter) ". ";
}
h2:before {
    content: counter(chapter) "." counter(section) " ";
}
h3:before {
    content: counter(chapter) "." counter(section) "." counter(slide) " ";
}

</style>
</head>

<body>

<article> <h1>chapter</h1> </article>

<article> <h2>section A</h2> </article>
<article> <h3> slide a</h3> </article>
<article> <h3> slide b</h3> </article>

<article> <h2>section B</h2> </article>
<article> <h3> slide a</h3> </article>
<article> <h3> slide b</h3> </article>

</body>
</html>

我想编号 h1/h2/h3（我将其命名为章、节、幻灯片），但是 article 标签让它变得困难。

如何修改 CSS 规则，以便查看：

3. chapter
3.1 section A
3.1.1 side a
3.1.2 side b
3.2 section B
3.2.1 side a
3.2.2 side b

而不是（h3 编号错误）：

3. chapter
3.1 section A
3.1.1 side a
3.1.1 side b
3.2 section B
3.2.1 side a
3.2.1 side b

Answer 1

这个怎么样。没有JavaScript； HTML 标记与您原来的标记相同。

body {
  counter-reset: chapter 3 section 0 slide 2;
}

h2 {
  counter-increment: slide -2 section;
}

h3 {
  counter-increment: slide;
}

h1:before {
  content: counter(chapter)". ";
}

h2:before {
  content: counter(chapter)"." counter(section)" ";
}

h3:before {
  content: counter(chapter)"." counter(section)"." counter(slide)" ";
}

<article> <h1>chapter</h1> </article>

<article> <h2>section A</h2> </article>
<article> <h3> slide a</h3> </article>
<article> <h3> slide b</h3> </article>

<article> <h2>section B</h2> </article>
<article> <h3> slide a</h3> </article>
<article> <h3> slide b</h3> </article>

它的工作原理不是 counter-reset，而是 slide 计数器的 counter-increment，从而使计数器保持全局。但是，有一个问题：它仅在幻灯片数量固定（在本例中为 2）时有效。

Answer 2

原因：

正如我在对该问题的评论中所述，CSS 计数器对级别和文档结构非常敏感。如果结构与某种模式不匹配，那么它将影响计数器的整个工作。这是因为元素如何继承计数器和计数器的值。我的回答 .

中描述了有关计数器如何工作、如何继承的详细信息

为了更加清晰，我在下面的代码片段中添加了内联注释来解释工作原理：

body {
  counter-reset: chapter 3 section 0;
}
h2 {
  counter-reset: slide 0;
  counter-increment: section;
}
h3 {
  counter-increment: slide;
}
h1:before {
  content: counter(chapter)". ";
}
h2:before {
  content: counter(chapter)"." counter(section)" ";
}
h3:before {
  content: counter(chapter)"." counter(section)"." counter(slide)" ";
}

<!-- body creates chapter, section counters -->
<article> <!-- this inherits both counters from its parent and also its value because it is the previous element in document order -->
  <h1>chapter</h1> <!-- inherits both counters and their value from parent -->
</article>

<article> <!-- this inherits both chapter and section counters from parent (body) and the value for the counters from the previous sibling -->
  <h2>section A</h2> <!-- inherits both counters, increments section to 1, creates slide counter. slide counter is visible only to this element but not parent -->
</article>
<article> <!-- this inherits both chapter and section counters from parent (body) and the value for the counters from the previous sibling -->
  <h3> slide a</h3> <!-- inherits chapter, section but sees no slide counter and hence creates a new slide counter and increments to 1, the parent doesn't know about this new slide counter -->
</article>
<article> <!-- this inherits both chapter and section counters from parent (body) and the value for the counters from the previous sibling -->
  <h3> slide b</h3> <!-- inherits chapter, section but sees no slide counter and hence creates a new slide counter and increments to 1, the parent doesn't know about this new slide counter -->
</article>

<article> <!-- this inherits both chapter and section counters from parent (body) and the value for the counters from the previous sibling -->
  <h2>section B</h2>  <!-- inherits both counters, increments section to 2, creates slide counter. slide counter is visible only to this element but not parent -->
</article>
<article> <!-- this inherits both chapter and section counters from parent (body) and the value for the counters from the previous sibling -->
  <h3> slide a</h3> <!-- inherits chapter, section but sees no slide counter and hence creates a new slide counter and increments to 1, the parent doesn't know about this new slide counter --> 
</article>
<article> <!-- this inherits both chapter and section counters from parent (body) and the value for the counters from the previous sibling -->
  <h3> slide b</h3> <!-- inherits chapter, section but sees no slide counter and hence creates a new slide counter and increments to 1, the parent doesn't know about this new slide counter --> 
</article>

但是，由于文档的结构，链接线程中描述的解决方案仍然不适用于这种情况。即使我们在 body 处重置 slide 计数器并使计数器对所有子元素可见，重置为 0 也只会在遇到 h2 时发生。由于所有 h2 都在各自的 article 内，并且 article（因此子 h2）已经从其父级继承了 slide 计数器，另一个重置为不同的级别可能会导致自嵌套（即，在父级 slide 下创建新的 slide 计数器）。因此，后续重置无效，并且 h3 元素继续编号，如下面的代码片段所示：

body {
  counter-reset: chapter 3 section 0 slide 0;
}
h2 {
  counter-reset: slide 0;
  counter-increment: section;
}
h3 {
  counter-increment: slide;
}
h1:before {
  content: counter(chapter)". ";
}
h2:before {
  content: counter(chapter)"." counter(section)" ";
}
h3:before {
  content: counter(chapter)"." counter(section)"." counter(slide)" ";
}

<article>
  <h1>chapter</h1>
</article>
<article>
  <h2>section A</h2>
</article>
<article>
  <h3> slide a</h3>
</article>
<article>
  <h3> slide b</h3>
</article>
<article>
  <h2>section B</h2>
</article>
<article>
  <h3> slide a</h3>
</article>
<article>
  <h3> slide b</h3>
</article>

解法：

这种情况有以下三种解决方法：

更改文档结构，使 h3 元素分组在相同的 article 下，如以下代码片段所示。

body {
  counter-reset: chapter 3 section 0;
}
h2 {
  counter-reset: slide 0;
  counter-increment: section;
}
h3 {
  counter-increment: slide;
}
h1:before {
  content: counter(chapter)". ";
}
h2:before {
  content: counter(chapter)"." counter(section)" ";
}
h3:before {
  content: counter(chapter)"." counter(section)"." counter(slide)" ";
}

<article>
  <h1>chapter</h1>
</article>
<article>
  <h2>section A</h2> <!-- The reset here has no effect because it creates a different instance -->
</article>
<article>
  <h3> slide a</h3> <!-- Parent doesn't have slide counter, so this creates one and increments it to 1 -->
  <h3> slide b</h3> <!-- This inherits slide counter's value fom previous element and increments to 2 -->
</article>
<article>
  <h2>section A</h2> <!-- The reset here has no effect because it creates a different instance -->
</article>
<article>
  <h3> slide a</h3> <!-- Parent doesn't have slide counter, so this creates one and increments it to 1 -->
  <h3> slide b</h3> <!-- This inherits slide counter's value fom previous element and increments to 2 -->
</article>

给每个 article 一个 class 来指示它包含的内容，然后在父级别本身执行 counter-reset 或 counter-increment。这意味着所有兄弟姐妹都可以看到计数器及其值。在我看来，这是无需修改结构的最佳方法。

.h1-container {
  counter-reset: chapter 3 section 0 slide 0;
}
.h2-container {
  counter-reset: slide 0;
  counter-increment: section;
}
.h3-container {
  counter-increment: slide;
}
h1:before {
  content: counter(chapter)". ";
}
h2:before {
  content: counter(chapter)"." counter(section)" ";
}
h3:before {
  content: counter(chapter)"." counter(section)"." counter(slide)" ";
}

<article class='h1-container'>
  <h1>chapter</h1>
</article>
<article class='h2-container'>
  <h2>section A</h2>
</article>
<article class='h3-container'>
  <h3> slide a</h3>
</article>
<article class='h3-container'>
  <h3> slide b</h3>
</article>
<article class='h2-container'>
  <h2>section A</h2>
</article>
<article class='h3-container'>
  <h3> slide a</h3>
</article>
<article class='h3-container'>
  <h3> slide b</h3>
</article>

使用JavaScript或jQuery（或其他首选库）计算元素并根据它设置编号。

Answer 3

我一直需要这个问题来验证 pdf 中的列表，但是我很难按照这里提供的方式使用它，因为 h1 没有在 css 中实现它确实不算。无论如何，有一个适合自己的解决方案。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: chapter 0 section 0;
}
h1{
    counter-increment: chapter;
}
h2 {
  counter-reset: slide 0;
  counter-increment: section;
}
h3 {
  counter-increment: slide;
}
h1:before {
  content: counter(chapter)". ";
}
h2:before {
  content: counter(chapter)"." counter(section)" ";
}
h3:before {
  content: counter(chapter)"." counter(section)"." counter(slide)" ";
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>This paragraph is styled with CSS.</p>
<h2>Test</h2>
<p>CSS comments are not shown in the output.</p>
<h1>Hello World!</h1>
<p>This paragraph is styled with CSS.</p>

</body>
</html>

使用 CSS 对 h1、h2、h3 进行编号，并带有文章标签

Numbering h1, h2, h3 with CSS, with presence of article tag

css

css-counter