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

时间：2015-11-20 15:31:02

标签： css css3 css-counter

我有这样的代码，其中HTML是由...生成的 hieroglyph，CSS由提供 我：

article

我想编号为h1 / h2 / h3（我将其命名为章节，幻灯片），但是 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 标记使其变得困难。

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

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 错误编号）：

curl -X POST \ 
--header "Content-Type: application/json" \ 
-d '{"type":"deploy-key"}' \ 
https://circleci.com/api/v1/project/myOrg/myPrj/checkout-key?circle-token=8e9c47...etc

3 个答案:

答案 0 :(得分：1)

<强>理由：

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

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

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计数器并使计数器对所有子元素可见，只有在遇到h2时才会重置为0。由于所有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>

<强>解决方案：

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

  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-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>

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

答案 1 :(得分：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>

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

答案 2 :(得分：0)

我一直需要这个问题来验证pdf中的列表，但是由于在css中未实现h1，因此我无法使用它，因为它无法计数。 无论如何，有一种我适合自己的解决方案。

<!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>
相关问题
最新问题