html – 如何在我的css代码中增加计数器？

参见英文答案 > html – CSS Counter Increment does not work3个
> Create line numbers on pre with CSS only3个
在我的HTML代码中,我定义了以下列表：

<p class="list">first.</p>
<p class="list">second.</p>

现在,我在css中：

.list {
  display: table;
}
.list:before {
  display: table-cell;
  counter-increment: counter;
  content: counter(counter) '.';
  padding-right: 5px;
}

并且页面上的结果是：

1. first
1. second

如何将第二个数字增加到2的值？

解决方法

您应该在列表的包装上使用counter-reset属性 – 请参阅下面的演示：

body {
 counter-reset:counter;
}
.list {
  display: table;
}
.list:before {
  display: table-cell;
  counter-increment: counter;
  content: counter(counter) '.';
  padding-right: 5px;
}

<p class="list">first.</p>
<p class="list">second.</p>