Question

我正在制作一个多列，CSS编号的TOC，如下所示：

| 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和浮动列进行换行。类。

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

这是我使用的CSS：

＆＃13;

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

＆＃13;

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

＆＃13;

不知怎的，我无法让Level-2计数器增加。

Answer 1

<强>解决方案：

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

<强>演示：

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>级counter-reset使用toc2，但此h1嵌套在h1下方。

根据W3C Specs，CSS计数器的范围和继承如下：

当前元素获取其父级或兄弟所拥有的所有计数器。（反传承）
从其上一个兄弟（或）父级继承 计数器的值。（值继承）

此处，由于<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>计数器已在toc1级别重置，因此.sub-nav-content元素都会获取计数器和所有.column元素及其伪元素得到它（来自他们自己的父母）。在.menu-item上使用counter-increment时，它会从其父级增加 got 的计数器的值，因此所有直到h1:before的元素都知道计数器的存在及其当前值。因此，每个.sub-nav-content都能够正确递增它。

但h1仅在toc2级重置。这意味着h1，。.sub-nav-content或column中的任何一个都不知道此计数器的存在。只有.menu-item及其子女才知道。因此，当遇到h1元素时，UA会看到他们是否已经拥有h2个计数器，并且因为他们没有， new toc2 计数器在每个 toc2处创建，并且会递增。因此，他们的价值永远只有1而不是别的。

CSS计数器不会为<h2>增加

1 个答案: