CSS 计数器不会增加 <h2>

Question

我正在制作一个多栏，CSS-编号，目录如下：

| 1. TOC Level-1    | 2. TOC Level-1    |
| 1.1 TOC Level-2   | 2.1 TOC Level-2   |
| 1.2 TOC Level-2   | 2.2 TOC Level-2   |
| 1.3 TOC Level-2   | 3. TOC Level-1    |
                    | 3.1 TOC Level-2   |

由于CSS-列是不可控的，换行是用JS和浮动'column' class.

这是我遵循的示例： http://www.2ality.com/2012/01/numbering-headingshtml.html

这是我使用的CSS：

body {} .column {
  border: 2px dotted grey;
  float: left;
  width: 40%;
}
.menu-item:hover {
  cursor: pointer;
  color: blue;
}
.sub-nav-content {
  counter-reset: toc1;
}
h1 {
  counter-reset: toc2;
}
h1:before {
  counter-increment: toc1;
  content: counter(toc1)". ";
}
h2:before {
  counter-increment: toc2;
  content: counter(toc1)"." counter(toc2)" ";
}

<div class="sub-nav">
  <div class="sub-nav-content">
    <div class="column">
      <a class="menu-item"><h1>TOC entry level1</h1></a>
      <a class="menu-item"><h2>TOC entry level2</h2></a>
      <a class="menu-item"><h2>TOC entry level2</h2></a>
      <a class="menu-item"><h2>TOC entry level2</h2></a>
    </div>
    <div class=column>
      <a class="menu-item"><h1>TOC entry level1</h1></a>
      <a class="menu-item"><h2>TOC entry level2</h2></a>
      <a class="menu-item"><h2>TOC entry level2</h2></a>
      <a class="menu-item"><h1>TOC entry level1</h1></a>
      <a class="menu-item"><h2>TOC entry level2</h2></a>
      <a class="menu-item"><h2>TOC entry level2</h2></a>
      <a class="menu-item"><h2>TOC entry level2</h2></a>
    </div>
  </div>
</div>

不知怎么的，我无法使 2 级计数器递增。

Answer 1

解法：

您可以使用 CSS 计数器通过稍微调整 HTML 和 CSS 来实现此目的。首先，将 a 放在 h1 或 h2 中，而不是相反。其次，在 h1 或 h2 级别增加计数器，但使用 a 的 :before 来显示编号。因此，该数字也将具有 :hover（因为它现在是 a 的一部分）。

演示：

body {} .column {
  border: 2px dotted grey;
  float: left;
  width: 40%;
}
.menu-item:hover {
  cursor: pointer;
  color: blue;
}
.sub-nav-content {
  counter-reset: toc1;
}
h1 {
  counter-reset: toc2;
}
h1 {
  counter-increment: toc1;
}
h1 a:before {
  content: counter(toc1)". ";
}
h2 {
  counter-increment: toc2;
}
h2 a:before {
  content: counter(toc1)"." counter(toc2)" ";
}

<div class="sub-nav">
  <div class="sub-nav-content">
    <div class="column">
      <h1><a class="menu-item">TOC entry level1</a></h1>
      <h2><a class="menu-item">TOC entry level2</a></h2>
      <h2><a class="menu-item">TOC entry level2</a></h2>
      <h2><a class="menu-item">TOC entry level2</a></h2>
    </div>
    <div class=column>
      <h1><a class="menu-item">TOC entry level1</a></h1>
      <h2><a class="menu-item">TOC entry level2</a></h2>
      <h2><a class="menu-item">TOC entry level2</a></h2>
      <h1><a class="menu-item">TOC entry level1</a></h1>
      <h2><a class="menu-item">TOC entry level2</a></h2>
      <h2><a class="menu-item">TOC entry level2</a></h2>
      <h2><a class="menu-item">TOC entry level2</a></h2>
    </div>
  </div>
</div>

原始问题的原因：

以下是您的结构（已简化）。您正在做的是在 h1 级别使用 counter-reset 作为 toc2，但此 h1 嵌套在 a 下方。

<div class="sub-nav">
  <div class="sub-nav-content">
    <div class="column">
      <a class="menu-item"><h1>TOC entry level1</h1></a>
      <a class="menu-item"><h2>TOC entry level2</h2></a>
      <a class="menu-item"><h2>TOC entry level2</h2></a>
      <a class="menu-item"><h2>TOC entry level2</h2></a>
    </div>
  </div>
</div>

根据 W3C Specs，CSS 计数器的作用域和继承工作如下：

当前元素获取其parent或兄弟元素拥有的所有计数器。 (反继承)
它继承计数器的值，来自其前一个兄弟（或）parent。 (价值继承)

此处，由于 toc1 计数器在 .sub-nav-content 级别重置，因此 .column 元素和所有 .menu-item 元素及其 pseudo-element也搞定了（来自自己的parent）。当 counter-increment 用于 h1:before 时，它会从 parent 增加 got 的计数器的值，因此所有元素直到.sub-nav-content 知道计数器的存在及其当前值。因此每个 h1 都能够正确地增加它。

但 toc2 仅重置为 h1 级别。这意味着 .sub-nav-content、.column 或 .menu-item 中的 none 知道此计数器的存在。只有 h1 及其 children 知道。因此，当遇到 h2 元素时，用户代理会查看它们是否已经拥有 toc2 计数器，如果没有，则 new toc2 计数器在每个 h2 处创建并递增。因此它们的价值将永远只有 1 而不是别的。

CSS 计数器不会增加 <h2>

CSS counter does not increment for <h2>

html

css

multiple-columns

css-counter