手动增加CSS计数器

Question

我希望能够将第20个项目后的CSS计数器重置为20。目标是有两个列表项，其中包含＆＃34; 20＆＃34;编号，然后正常继续列表。

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。引用规范：

  

必须在重置计数器之前完成继承计数器，这必须在设置计数器之前完成，这必须在递增计数器之前完成，这必须在使用计数器之前完成（例如，在content属性中）。

由于复位发生在增量之前，我们需要将计数器再移回一个位置，因此增量将使其处于正确的数字。