Question

使用常规方法使用CSS计数器将标题数添加到标题时，使用header标记时遇到问题。

它似乎在某种程度上干扰了counter（s）

＆＃13;

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)". "
}

＆＃13;

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

＆＃13;

输出为：

第一章
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＆amp; Edge，不在Chrome＆amp;戏

Answer 1

只需将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>

标题标记干扰css计数器标题

1 个答案: