Счетчик счетчиков CSS не увеличивается

Вопрос:

У меня есть следующая разметка HTML

<h1>Article title</h1>
<h2>First section</h2>
<h3>First section, first subsection</h3>
<h2>Second section</h2>
<h2>Third section</h2>
<h3>Third section, first subsection</h3>
<h2>Fourth section</h2>
<h2>Fifth section</h2>
<h3>Fifth section, first subsection</h3>
<h3>Fifth section, second subsection</h3>
<h3>Fifth section, third subsection</h3>
...

И следующий SCSS

body.page-id-4065 {
counter-reset: h2;

h2 { counter-reset: h3; }
h3 { counter-reset: h4; }
h4 { counter-reset: h5; }
h5 { counter-reset: h6; }

h2:before {color: $grey-dark; counter-increment: h2; content: counter(h2) ". "}
h3:before {color: $grey-dark; counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
h4:before {color: $grey-dark; counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}
h5:before {color: $grey-dark; counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
h6:before {color: $grey-dark; counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}

h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before { content: ""; counter-increment: none }

#reply-title:before { content: ''; }
}

Кажется, что приращение работает отлично:

  1. Первый раздел
    1.1. Первый раздел, первый подраздел
  2. Второй раздел
  3. Третий раздел
    3.1. Третий раздел, первый подраздел
  4. Четвертый раздел
  5. Пятый раздел

Но когда он туда попадает, эти несколько H3 отображаются без приращения счетчика:

5.1. Первый подраздел
5.1. Второй подраздел
5.1. Третий подраздел

Я не могу понять, почему он не увеличивает этот суб, но работает нормально на верхнем уровне. Любая идея, почему это может произойти?

Если вы хотите увидеть живую страницу (прокрутите вниз до заголовка № 5): https://www.melopienso.com/blog/perros/comida/pienso/

Благодарю!

PS: Я изучил другие очень похожие записи в StackOverflow без успеха для этого конкретного случая.

Лучший ответ:

Причина, по которой он не работает, заключается в том, что h2 находится на под-уровне (у него есть родитель, который h3 не делает).

Это работает:

<div> <!-- h2 first parent - also h3 first parent -->
  <h2>Fifth section</h2>
  <h3>Fifth section, first subsection</h3>
  <h3>Fifth section, first subsection</h3>
</div>

Это работает:

<div> <!-- h2 first parent - h3 parent (not first) -->
  <h2>Fifth section</h2>

  <div>
    <h3>Fifth section, first subsection</h3>
  </div>

  <div>
    <h3>Fifth section, first subsection</h3>
  </div>
</div>

Это не означает:

<div>
  <div> <!-- h2 first parent - wait, there no h3s in sub-levels! -->
    <h2>Fifth section</h2>
  </div>

  <h3>Fifth section, first subsection</h3>
  <h3>Fifth section, first subsection</h3>
</div>

Оцените статью
TechArks.Ru
Добавить комментарий