Html CSS中的更多计数器

我的CSS计数器有问题

我设置了两个计数器：一个索引

标题

，另一个索引

图像

。但是，只有一个工作正常，另一个（用于图像）在所有图像描述中仅显示数字1。你可以看到这个例子

正文{
计数器复位：figcounter；
计数器复位：头2计数器；
}
图：之前{
计数器增量：figcounter；
内容：“Fig.“计数器（figcounter）”：”；
字体大小：粗体；
}
菲格雷塞特先生{
计数器复位：figcounter；
}
.标题2：之前{
计数器增量：头2计数器；
内容：计数器（头2计数器）“；
}
.head2reset{
计数器复位：头2计数器；
}

文章标题
服务
谷歌服务
电子邮件客户端
其他
谷歌标志


Chrome

Hm奇怪，如果您将css更改为：

.fig {
  counter-increment: figcounter;
}
.fig:before {
  content: "Fig. " counter(figcounter) ": ";
  font-weight: bold;
}

看看小提琴：

但是对不起，我不知道为什么你的小提琴坏了。也许有人有什么建议。我也会对解释感兴趣

再见 Ralf

更改自：

正文{
计数器复位：figcounter；
计数器复位：头2计数器；
}

致：

正文{
计数器复位：figcounter Head2计数器；
}

为什么?

因为可以覆盖

计数器重置

和

计数器增量

。 因此，如果必须使用

计数器重置

和

计数器增量

进行 超过1个元素计数器变量，您需要将它们放在

计数器重置

和

计数器增量

的同一声明中，并用空格分隔它们。 在这种情况下，只需将

计数器重置

属性

---

正文{
计数器复位：figcounter Head2计数器；
}
图：之前{
计数器增量：figcounter；
内容：“Fig.“计数器（figcounter）”：”；
字体大小：粗体；
}
菲格雷塞特先生{
计数器复位：figcounter；
}
.标题2：之前{
计数器增量：头2计数器；
内容：计数器（头2计数器）“；
}
.head2reset{
计数器复位：头2计数器；
}

文章标题
服务
谷歌服务
电子邮件客户端
其他
谷歌标志


Chrome

您的figcounter计数器没有正确地保持计数，因为它在每个量程后重置计数器。你想要的是有一个需要保持计数的父母

因此，在您的示例中，如果您将希望计数器不在div元素内重置的部分括起来，那么它将起作用

如果我的解释清楚得像泥一样，请参阅

这是片段

正文{
计数器复位：figcounter；
计数器复位：头2计数器；
}
图：之前{
计数器增量：figcounter；
内容：“Fig.“计数器（figcounter）”：”；
字体大小：粗体；
}
菲格雷塞特先生{
计数器复位：figcounter；
}
.标题2：之前{
计数器增量：头2计数器；
内容：计数器（头2计数器）“；
}
.head2reset{
计数器复位：头2计数器；
}

文章标题
服务
谷歌服务
电子邮件客户端
其他
谷歌标志


铬

更新-添加CSS代码。工作演示正在进行中，请看OP的问题“我想在标题上独立索引图像”，您的答案不符合OP的需要：）@dippas-好的，即使这样也可以工作。你所要做的就是让计数器复位。因此，如果我们只取出'div'元素，并将类'figreset'赋予标题'h2'元素。这也将重置它。我将更新我的答案，以反映使用此方法在每个部分重置索引的有趣想法，可能也很有用。