css - 手动增加 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).

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