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

Question

在我的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的值？

Answer 1

您应该在s counter-reset的包装器上使用属性list- 请参阅下面的演示:

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>