header 标签干扰 css 计数器标题

Question

当使用 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

上

Answer 1

简单地 replace/add header 到 h1 声明规则中的 counter-reset，取决于你是否要有 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>

header 标签干扰 css 计数器标题

header tag interfering with css counters headings

html

css

header

css-counter