通过计数器向ol li添加数字(当使用display flex时)不起作用

Question

使用CSS: Counters将数字添加到以下列表中。我正在尝试，但我想我目前没有申请。

#two li {display: flex;}
li::before {counter-increment: all};

<div>
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Oranges</li>
<li>Peach</li>
<li>PineApplie</li>
</ol>
</div>
<div>
<ol id="two">
<li>Apple</li>
<li>Mango</li>
<li>Oranges</li>
<li>Peach</li>
<li>PineApplie</li>
</ol>
</div>

请帮帮我。我在第二个列表中也需要相同的编号，由于某种原因，我不得不在lis上使用display:flex。

Answer 1

您需要重置body标签body { counter-reset: all; }中的计数器

body {
counter-reset: all;
}
#two li {display: flex;}
#two li::before {
counter-increment: all;
content: "list " counter(all) "- ";
}

<div>
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Oranges</li>
<li>Peach</li>
<li>PineApplie</li>
</ol>
</div>
<div>
<ul id="two">
<li>Apple</li>
<li>Mango</li>
<li>Oranges</li>
<li>Peach</li>
<li>PineApplie</li>
</ul>
</div>