Счетчик CSS не увеличивается - PullRequest
Новая
       26

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

0 голосов
/ 26 августа 2018

Счетчик CSS в моем примере не увеличивается, хотя я указал его для этого. Я прочитал здесь несколько вопросов, касающихся уровня вложенности элементов, которые могут вызвать это, но в моем случае все элементы находятся на одном уровне.

MWE 

<!DOCTYPE html>
<head>
  <style>
  body {
    counter-reset: firstCounter;
    counter-reset: secondCounter;
  }

  h2.heading::before {
    counter-increment: firstCounter;
    content: counter(firstCounter)"\00a0";
  }

  h3.issue::before {
    counter-increment: secondCounter;
    content: counter(secondCounter)"\00a0";
  }
  </style>
</head>

<body>
  <h1>The Book</h1>

  <h2 class="heading">First Heading</h2>
    <h3 class="issue">The Issue of Drinking</h3>
    <h3 class="issue">The Issue of Drinking Too Much</h3>

  <h2 class="heading">Second Heading</h2>
    <h3 class="issue">The Issue of Driving</h3>
    <h3 class="issue">The Issue of Drunk Driving</h3>

</body>
</html>

Результат

enter image description here

Счетчик для заголовка «Второй заголовок» должен быть «2.». Замена порядка counter-reset на тег body в CSS вызывает ту же проблему, но в обратном порядке в отношении того, какой заголовок затронут.

CodePen Link

1 Ответ

0 голосов
/ 26 августа 2018

Проблема заключается в повторном определении свойства counter-increment: 

body {
  counter-reset: firstCounter;
  counter-reset: secondCounter;
}

Второе определение заменяет первое; чтобы увеличить несколько счетчиков, вы просто должны использовать список этих счетчиков, разделенный пробелами: 

body {
  counter-reset: firstCounter secondCounter;
}

Имя: счетчик приращений

Значение: [? ] + | доли не имеет

<custom-ident> <integer>?

Элемент изменяет значение одного или нескольких счетчиков на нем. Если в данный момент в элементе нет счетчика с указанным именем, элемент создает новый счетчик с заданным значением с начальным значением 0 (хотя он может затем сразу установить или увеличить это значение на другое значение). 

body {
  counter-reset: firstCounter secondCounter;
}

h2.heading::before {
  counter-increment: firstCounter;
  content: counter(firstCounter)"\00a0";
}

h3.issue::before {
  counter-increment: secondCounter;
  content: counter(secondCounter)"\00a0";
}

/* irrelevant, just for the sake of easier visuals in the answer: */

h2 {
  border-top: 2px solid #aaa;
}

h3 {
  margin-left: 2em;
}
<h1>The Book</h1>

<h2 class="heading">First Heading</h2>
<h3 class="issue">The Issue of Drinking</h3>
<h3 class="issue">The Issue of Drinking Too Much</h3>

<h2 class="heading">Second Heading</h2>
<h3 class="issue">The Issue of Driving</h3>
<h3 class="issue">The Issue of Drunk Driving</h3>

Справка:

...