当使用 CSS 计数器使用通常的方法将节号添加到标题时，我在使用 header 标签时遇到了问题。
它似乎以某种方式干扰了计数器(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 标签后 输出如预期:
- 第一章
- 1.1。分章
- 1.2。分章
- 1.3。分章
- 1.3.1。小节
在 H1 周围使用 header 标签是否会导致这种情况？它在 Firefox 和 Edge 上执行，而不是在 Chrome 和 Opera 上执行
最佳答案
只需将 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>关于css - 标题标签干扰 css 计数器标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39328835/