html - 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 番目の数値を 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>

Answer 2

次のように使用する必要があります。

<ol>
    <li class="list">first.</li>
    <li class="list">second.</li>
</ol>