如果元素不是兄弟元素，则自动递增数字

Question

如果元素不是同级元素，是否可以（仅使用 css）自动递增数字？

有这样的事吗？

.numbers {
    counter-increment: item;

    &::before {
        content: counter(item) ":";
    }
}

<div class="container">
  <div class="row">
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
  </div>
</div>

如果没有，实现这一目标的最佳和最有效的方法是什么？ JavaScript？

Answer 1

除了使用

.numbers

增加计数器之外，您还可以与家长一起完成。

.col {
  counter-increment: item;
}

.col .numbers:before {
  content: counter(item) ":";
}

<div class="container">
  <div class="row">
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
  </div>
</div>