CSS计数器自动编号未递增所有元素仅显示Element 1

安全阿岳

2026-8-26

问题成因

所有网格项都显示「Element 1」的核心原因是CSS计数器的重置属性放置位置错误：
counter-reset的作用是初始化/清零指定计数器，你把该属性写在每一个.grid div::before伪元素的样式规则中，会导致每个伪元素渲染时，都会先把Element计数器重置为初始值0，再执行+1的自增操作，最终每个元素读取到的计数器值永远是1，无法实现跨元素连续递增的效果。

修复方案

按照CSS计数器的作用逻辑调整属性位置即可：

将计数器初始化规则counter-reset: Element 0;移动到网格容器.grid的样式规则中，仅在父容器层级初始化一次计数器，避免子元素反复重置计数
保留子项伪元素上的自增、内容输出规则即可，其余布局样式可微调匹配参考效果

修正后的完整CSS代码如下：

*{
    box-sizing: border-box;
    list-style:none;
    margin: 0;
    padding: 0;
}
.grid {
    background-color: #ddd;
    padding: 20px;
    width: 800px;
    height: 400px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr;
    gap: 10px;
    /* 仅在父容器初始化一次计数器 */
    counter-reset: Element 0;
  }
  .grid div{
    padding: 20px;
    background-color: darkgreen;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .grid div::before{
    /* 移除此处的counter-reset，避免每次渲染都重置计数 */
    counter-increment: Element 1;
    content: "Element " counter(Element);
    color: white;
  }