::before 用作计数器

今天在做表单生成器的任务卡的时候，想用::before来实现每个字段自动编号的功能，所以查看了一下::before的用法，::before真的是一个很神奇的用法。

参考的这位大神的文章
可以说是讲的非常详细了，我这里就说一下我遇到的一些问题。
这个是我的DOM结构

image
就是每个div.field的前面加一个序号
这是对应的css代码

#header{
    text-align: center
}

#header button{
    width: 10em;
    line-height: 20px;
    border-radius: 2px;
    border: 1px solid gray;
}

#content {
    counter-reset: field 0;
}

.field h1{
    counter-increment: field;    
}

.field h1::before{
    content: counter(field)'.';
}

我的问题就是conter-reset这个属性定义的位置出错了，我原来是定义在.field h1上面的，那么这样其实每个.field h1 都是单独的一个counter，我们要让他们对应同一个counter的话，得把counter定义在父级元素上。