4

我正在制作一个多列、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：

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>

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

4

1 回答 1

3

解决方案：

您可以通过稍微调整您的 HTML 和 CSS 来使用 CSS 计数器来实现这一点。首先，把a里面h1或h2而不是相反。h1其次，在orh2级别增加计数器，但使用:before 来a显示编号。因此，该数字也将具有: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>

原始问题的原因：

以下是您的结构（简化）。您所做的是在级别使用counter-resetfor ，但它嵌套在.toc2h1h1a

<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 规范，CSS 计数器的作用域和继承如下：

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

在这里，由于toc1计数器在.sub-nav-content关卡中被重置，两个.column元素都获得了计数器，所有.menu-item元素和它们的伪元素也得到了它（从它们自己的父级）。当counter-increment使用 on 时，它会增加从其父级获得h1:before的计数器的值，因此所有元素都可以知道计数器的存在及其当前值。因此，每个人都能够适当地增加它。.sub-nav-contenth1

但toc2仅在h1级别重置。这意味着 , 中没有.sub-nav-content。column或者.menu-item知道这个计数器的存在。只有 theh1和它的孩子知道。因此，当h2遇到元素时，UA 会查看它们是否已经拥有该toc2计数器，并且如果它们没有，则会在每个元素处创建一个新 toc2 计数器 h2并递增它们。因此，它们的值将永远只有 1 而不是别的。

于 2016-06-19T11:46:40.840 回答