2

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

3 回答 3

1

原因：

正如我在对该问题的评论中所描述的，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>

但是，由于文档的结构，链接线程中描述的解决方案仍然不适用于这种情况。即使我们slide在 body 处重置计数器并使计数器对所有子元素可见，重置为 0 也只有在h2遇到 a 时才会发生。由于所有人h2都在各自的内部article，并且article（因此 child h2）已经slide从其 parent 继承了计数器，因此在不同级别的另一个重置可能会导致自嵌套（即，slide在 parent 下创建新的计数器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>

解决方案：

这种情况有三种解决方案，它们如下：

  1. 更改文档结构以将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>

  2. 给每个article一个类来指示它包含的内容，然后在父级本身执行counter-resetor 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>

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

于 2015-11-21T04:37:26.620 回答
0

这个怎么样。没有 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>

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

于 2015-11-20T21:07:40.437 回答
0

我一直需要这个问题来验证 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>
于 2020-11-20T22:31:54.277 回答