3

当使用通常的方式通过 CSS 计数器将节号添加到标题时，我在使用header标签时遇到了问题。

它似乎以某种方式干扰了counter（s）

body {
  counter-reset: h1
}
h1 {
  counter-reset: h2
}
h2 {
  counter-reset: h3
}
h1:before {
  counter-increment: h1;
  content: counter(h1)". "
}
h2:before {
  counter-increment: h2;
  content: counter(h1)"." counter(h2)". "
}
h3:before {
  counter-increment: h3;
  content: counter(h1)"."counter(h2)"." counter(h3)". "
}
<!DOCTYPE HTML>
<html>

<head>
  <title>Headings counting</title>

</head>

<body>
  <header>
    <h1>First chapter</h1>
  </header>
  <h2>Sub Chapter</h2>
  <h2>Sub Chapter</h2>
  <h2>Sub Chapter</h2>
  <h3>Sub sub section</h3>
</body>

</html>

输出是：

  • 第一章
  • 1.1。分章
  • 1.1。分章
  • 1.1。分章
  • 1.0.1。子小节

删除header标签后output is as expected：

    1. 第一章
  • 1.1。分章
  • 1.2. 分章
  • 1.3. 分章
  • 1.3.1。子小节

在 H1 周围使用header标签是否会导致这种情况？它在 Firefox 和 Edge 上这样做，而不是在 Chrome 和 Opera 上

4

1 回答 1

2

只需替换/添加header到声明规则counter-reset中h1，具体取决于您是否要h1使用header标签。

body {
  counter-reset: h1
}

header { /* add h1 if you going to use h1 without header tag */
  counter-reset: h2
}
h2 {
  counter-reset: h3
}
h1:before {
  counter-increment: h1;
  content: counter(h1)". "
}
h2:before {
  counter-increment: h2;
  content: counter(h1)"." counter(h2)". "
}
h3:before {
  counter-increment: h3;
  content: counter(h1)"."counter(h2)"." counter(h3)". "
}
<header>
  <h1>First chapter</h1>
</header>
<h2>Sub Chapter</h2>
<h2>Sub Chapter</h2>
<h2>Sub Chapter</h2>
<h3>Sub sub section</h3>

于 2016-09-05T10:48:38.783 回答