javascript - 如何在 div 标签中添加编号列表样式

Question

我有 div 标签和 span 标签。如何使用 CSS 或 JavaScript 中的类名为 div 标签添加编号列表

<div id="editsum">
    <div class="esum"><span id="1430568488933" class="tbold">nde</span></div>
    <div class="esum"><span id="1430568576033" class="tbold">ca</span></div>
    <div class="esum"><span id="1430568582173" class="tdel">tim</span></div>
    <div class="esum"><span id="1430568582173" class="tins">Ó</span></div>
    <div class="esum"><span id="1430914284123" class="tdel">non</span></div>
    <div class="esum"><span id="1430914309275" class="tdel">cu</span></div>
</div>

Answer 1

如果要输出编号列表，最好的方法是使用 <ol>标签，但是如果你不能修改你的 HTML 并且仍然需要输出为一个编号列表，你可以利用 CSS 计数器来实现编号列表的行为。

body {
  counter-reset: esum;
}
.esum {
  position: relative;
  counter-increment: esum;
  padding: 10px;
}
.esum:before {
  content: counter(esum)".";
}

<div class="esum"><span id="1430568488933" class="tbold">nde</span>
</div>
<div class="esum"><span id="1430568576033" class="tbold">ca</span>
</div>
<div class="esum"><span id="1430568582173" class="tdel">tim</span>
</div>
<div class="esum"><span id="1430568582173" class="tins">Ó</span>
</div>
<div class="esum"><span id="1430914284123" class="tdel">non</span>
</div>
<div class="esum"><span id="1430914309275" class="tdel">cu</span>
</div>