使用CSS计数器

亚历山大·海因

如果每个元素嵌套在一个单独的元素中,该如何计数?

    .variant--name::before {
      counter-increment: section;
      content: "Abschnitt " counter(section) ": ";
    }
<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

内纳德·弗拉卡(Nenad Vracar)

你还需要 counter-reset

body {
  counter-reset: section;
}
.variant--name::before {
  counter-increment: section;
  content: "Abschnitt " counter(section)": ";
}
<div class="variant--group">
  <h3 class="variant--name">variant</h3>
</div>
<div class="variant--group">
  <h3 class="variant--name">variant</h3>
</div>
<div class="variant--group">
  <h3 class="variant--name">variant</h3>
</div>

编辑:您可以创建元素并counter-reset在其上使用,所以现在为每个parent元素创建计数器Fiddle的新实例,而不是在身体Fiddle上重置计数器

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章