通过计数器向 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>

通过计数器向 ol li 添加数字（使用 display flex 时）不起作用

Adding Numbers to ol li via counters (when using display flex) not working

html

css

css-counter