css - 使用css显示div的索引

Question

我有一堆这样的div

<div id="parentDiv">
    <div class="childDiv">some content</div>
    <div class="childDiv">some content</div>
    <div class="childDiv">some content</div>
</div>

有没有什么方法只使用 CSS，我可以在 childDiv 元素的左侧显示当前索引，如果我要使用 jQuery 随机播放它们，或者我是否必须使用 jquery 操作子 div，它会自动更新？

或者我正在考虑处理它的其他方法之一是将它们更改为 ol li 但我需要它们是基于零的并且我在 css 中也没有看到任何东西可以做到这一点

Answer 1

您可以使用 CSS counters :

#parentDiv {
  counter-reset: index; /* Create a `index` counter scope */
}
.childDiv:before {
  content: counter(index) ". "; /* Display `index` counter */
  counter-increment: index; /* Add 1 to `index` */
}

<div id="parentDiv">
  <div class="childDiv">some content</div>
  <div class="childDiv">some content</div>
  <div class="childDiv">some content</div>
</div>