手动递增 CSS 计数器

Question

我希望能够将 CSS 计数器重置为 20，从第 20 项开始。目标是有两个带有“20”数字的列表项，然后照常继续列表。

ol {
  list-style-type: none;
  counter-reset: quote-counter;
}
ol .list-item__inner::before {
  content: counter(quote-counter);
  counter-increment: quote-counter;
}

也许是这样的（这当然行不通）？

li:nth-child(20) {
    counter-reset: quote-counter 20;
}

Answer 1

你的问题是 counter-reset 属性会在 counter-increment 被调用之前设置计数器，所以你想 reset 到 n - 2 来获得重复你想要的：

ol {
  list-style-type: none;
  counter-reset: quote-counter;
}
ol li::before {
  content: counter(quote-counter) ". ";
  counter-increment: quote-counter;
}

li:nth-child(6) {
    counter-reset: quote-counter 4;
}

<ol>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
  <li>fifth</li>
  <li>sixth</li>
  <li>seventh</li>
</ol>

您需要 n - 2 而不是 n - 1，因为必须应用 counter-reset 和 counter-increment 的顺序。引用规范：

Inheriting counters must be done before resetting counters, which must be done before setting counters, which must be done before incrementing counters, which must be done before using counters (for example, in the content property).

由于重置发生在增量之前，我们需要将计数器再移回一个位置，以便增量将其置于正确的数字。

手动递增 CSS 计数器

Manually increment a CSS counter

css

counter