如何在不使用计数器复位的情况下减少计数器

Question

我搜索过这个，但找不到与我的问题类似的内容。

基本上我有一个名为 page 的计数器，我正在设置这样一个页面计数器：

content: "Page " counter(page); 在屏幕上显示如下 -> 第 1 页

一切正常，但我需要将页面计数器设置为从 0 而不是 1

我正在使用 Wiki (confluence)，但我无权访问定义 page 的位置，因为它只是一个要使用的变量对于 CSS 个像以前一样的计数器。

我尝试关注，但一点运气都没有：

content: "Page " counter(page) - 1;

content: "Page " counter(page - 1);

content: "Page " calc(counter(page) - 1);

我也试过在前面加上 counter-reset:

counter-reset: page -1;
content: "Page " counter(page);

现在我的问题是，我可以将计数器设置为从 0 开始而不使用任何 counter-reset 属性吗？或者，在我实际尝试使用 counter-reset 的先前示例中，我是否犯了任何错误？我错过了什么吗？

Answer 1

如果您访问此页面寻求有关使用 CSS 计数器与融合工具 的帮助，请记下：

I wrote a thread in confluence support forum, but apparently what I want to do it's not possible.

这是一种不使用 counter-reset: [counter-name] -1 从 0 开始的方法。基本上我们所做的是仅从第二次出现 div class='page' 开始递增计数器，以便第一个实例的计数器值始终保持为 0.

counter-reset好像不是必须的属性^*。当没有提到reset时，0作为默认值，下面的代码仍然有效。

^{* - 在 W3 文档或 MDN 中找不到任何参考资料表明 counter-reset 是可选的，但浏览器似乎支持它。}

body {
  counter-reset: page;
}
.page:before {
  content: "Page " counter(page);
}
.page ~ .page {
  counter-increment: page;
}

<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>

我发布上面的内容只是为了示例，我认为这不是正确的做法。 推荐的方法 如下所示，在重置计数器时，我们将起始值设置为 -1。

body {
  counter-reset: page -1;
}
.page {
  counter-increment: page;
}
.page:before {
  content: "Page " counter(page);
}

<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>

Answer 2

创建一个名为 Time 或其他名称的 var，它将是您在计时器上显示的最后一个数字，然后在重新启动后检查 var，如果它是 9 或重新启动数字之前的数字，则将显示数字设置为 0

How to decrease counter without using counter-reset