主页 / coding / 问题 / 78537842
Accepted
Meek
Asked: 2024-05-27 16:02:40 +0800 CST

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

  • 772

如果元素不是同级元素，是否可以（仅使用 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？

html

1 个回答

  1. Best Answer

    除了使用 增加计数器之外.numbers，您还可以使用父级来执行此操作。

    .col {
  counter-increment: item;
}

.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>

    • 1

相关问题