如何使用CSS计数器为每个子元素前置索引编号？

问题说明 #

给定以下DOM结构：

<div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>


<div>
<div>Tiger</div>
<div>Monkey</div>
<div>Fox</div>
</div>

希望通过CSS计数器实现分组编号的渲染效果：

1.A
2.B
3.C
4.D

1.Tiger
2.Monkey
3.Fox

尝试了以下代码但未成功：

div > div:before {
  content: counter ("div > div");
}

问题原因与解决方法 #

你的代码存在几个问题：

• 没有初始化和递增计数器，CSS计数器需要先通过counter-reset初始化，再用counter-increment实现计数增长。
• 计数器名称不能包含空格和特殊字符，你用的"div > div"不符合规范。
• 没有设置每个父div独立计数，导致所有子元素会连续编号而不是分组重置。

正确的CSS代码如下：

/* 给每个父div初始化并重置计数器，确保每组从1开始 */
div {
  counter-reset: item;
}

/* 子div的前置内容显示计数器，同时递增计数 */
div > div:before {
  counter-increment: item;
  content: counter(item) ".";
  /* 可选：添加间距让数字和文本更美观 */
  margin-right: 0.25em;
}

完整代码演示 #

<div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>
<div>
  <div>Tiger</div>
  <div>Monkey</div>
  <div>Fox</div>
</div>

div {
  counter-reset: item;
}

div > div:before {
  counter-increment: item;
  content: counter(item) ".";
}

内容的提问来源于stack exchange，提问作者AGamePlayer