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

【问题标题】：Numbering h1, h2, h3 with CSS, with presence of article tag使用 CSS 对 h1、h2、h3 进行编号，并带有文章标签
【发布时间】：2015-11-20 15:31:02
【问题描述】：

我有这样一段代码，其中的 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

【问题讨论】：

stackoverflow.com/questions/31658111/… 的可能副本（或相关）。编号的原因是因为h3 不在同一个父级中。您需要重新查看文档结构，因为使用当前方式，即使您重置 body 的所有计数器（如该答案中所述），它也无法正常工作（待续......）
即使你在body 处执行counter-reset: slide 0 会发生什么，所有h3 都会得到连续编号，因为将其重置回0 的h2 在不同的父级之下。
感谢 cmets，我会尝试用 JavaScript 而不是 CSS 来实现它。
不，伙计。看来您要么必须更改结构（或）将类添加到 article 标记，如 in this demo（或）使用脚本。
谢谢哈利！我想我可以将您的解决方案与课程一起使用。这是我的scripting solution

标签： css css-counter

【解决方案1】：

原因：

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

为了更清楚起见，我在下面的 sn-p 中添加了内联 cmets 来解释其工作原理：

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 计数器并使计数器对所有子元素可见，但只有在遇到 h2 时才会重置为 0。由于所有h2 都在它们各自的article 内，并且article（以及子h2）已经从其父级继承了slide 计数器，因此不同级别的另一个重置可能会导致自嵌套（即即，新的slide 计数器正在创建嵌套在父slide 下）。因此，后续重置无效，h3 元素继续编号，如下面的 sn-p 所示：

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 下，如下面的 sn-p 所示。

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 一个类，表明它包含什么，然后在父级本身执行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（或其他首选库）对元素进行计数并根据它设置编号。

【讨论】：

【解决方案2】：

这个怎么样。没有 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 执行counter-increment，而是为slide 计数器执行counter-increment，从而使计数器保持全局性。但是，有一个问题：它仅在幻灯片数量固定（在本例中为 2）时才有效。

【讨论】：

【解决方案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>

【讨论】：