Html 如何为有序列表编号创建css样式？

我尝试使用CSS更改有序列表编号的样式，但得到了一些错误的结果

<ol>
  <li>This is the first item</li>
  <li>This is the second item</li>
  <li>This is the third item</li>
  <li>This is the fourth item</li>
  <li>This is the fifth item</li>
  <li>This is the sixth item</li>
</ol>

上面的代码显示2个列表编号（一个是默认的，另一个是我定义的样式）。输出类似于

这是我的第一项

这是我的第二项

---

那么，为什么会发生两次呢。请帮助获取，因为单一时间（第二个是我定义的样式）

自定义计数器是无效的选择器，即使它是有效的，也不会指向任何内容。只需删除整个规则集，然后添加
列表样式类型：none到
，如中所示：

ol {list-style-type: none;}

将
位置：相对
分配给所有
和
位置：绝对
分配给每个
li:：before
，以便对与文本的所有项目符号距离进行粒度控制

li {
  position: relative;
...
}

li::before {
...
  position: absolute;
  top: -1px;
  /* Adjust < -number | number+ > */
  left: -32px;
...

li{
位置：相对位置；
...
}
李：以前{
...
位置：绝对位置；
顶部：-1px；
/*调整<-编号|编号+>*/
左：-32px；
...


：根目录{
字体：400 16px/1.25 Verdana
}
ol{
列表样式类型：无；
}
欧利{
计数器增量：步进计数器；
位置：相对位置；
利润率：10px0；
}
奥利：以前{
内容：计数器（步进计数器）；
显示：块；
位置：绝对位置；
顶部：-1px；
/*调整<-编号|编号+>*/
左：-32px；
宽度：1.25雷姆；
高度：1.25雷姆；
线高：1.25雷姆；
背景色：rgb（0，200，200）；
颜色：白色；
字体大小：粗体；
字体大小：0.8rem；
文本对齐：居中；
边界半径：15px；
}

这是第一项
这是第二项
这是第三项
这是第四项
这是第五项
这是第六项
这是我的代码笔链接。好的，第一个列表编号消失了。但是第二个列表编号保持在相同的位置。它必须与第一个列表编号一样到达相应的位置。
li {
  position: relative;
...
}

li::before {
...
  position: absolute;
  top: -1px;
  /* Adjust < -number | number+ > */
  left: -32px;
...