Счетчик CSS не увеличивается для <h2>

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 и плавающего класса 'column'.

Вот пример, которому я следую: 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 уровень, но использовать :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-reset за toc2 на h1 уровень, но это 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 определение и наследование счетчиков CSS работает следующим образом:

• Текущий элемент получает все счетчики, которые есть у его родителя или родного брата. (встречное наследование)
• Он наследует значение счетчика от своего предыдущего родного брата (или) родителя. (наследование значения)

Здесь, так как toc1 Счетчик был сброшен на .sub-nav-content уровень, как .column элементы получают счетчик и все .menu-item элементы и их псевдоэлементы также получают это (от их собственного родителя). Когда counter-increment используется на h1:before, он увеличивает значение счетчика, полученного от его родителя, поэтому все элементы вплоть до .sub-nav-content знать о существовании счетчика и его текущем значении. Таким образом, каждый h1 может увеличить его правильно.

Но toc2 сбрасывается только при h1 уровень. Это означает, что никто из .sub-nav-content. column или же .menu-item знать о существовании этого счетчика. Только h1 и его дети знают это. Итак, когда h2 элементы встречаются, UA видит, если они уже имеют это toc2 счетчик или нет, а так как у них его нет, новый toc2 счетчик создается на каждом h2 и они увеличиваются. Таким образом, их значение всегда будет только 1 и ничего больше.