具有重复数字的有序列表

Question

如果我编写以下 HTML 代码：

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Rice</li>
  <li>Bread</li>
</ol>

我会得到

1. Coffee
2. Tea
3. Milk
4. Rice
5. Bread

如果我想得到如下结果，应该写什么代码：

1. Coffee
2. Tea
2. Milk
4. Rice
5. Bread

像这样就可以了：

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li class="same_number_as_previous">Milk</li>
  <li>Rice</li>
  <li>Bread</li>
</ol>

Answer 1

放弃股票柜台并使用自定义 CSS2 Counter:

ol {
  counter-reset: foo 0;
  list-style-type: none;
}
ol li {
  counter-increment: foo 1;
}
ol li.dont-increment {
  counter-increment: foo 0;
}
ol li:before {
  content: counter(foo) ".";
  /* bells and whistles */
  float: left;
  width: 2em;
  margin-left: -2.5em;
  text-align: right;
}

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li class="dont-increment">Milk</li>
  <li>Rice</li>
  <li>Bread</li>
</ol>

Answer 2

还好吗？

ol {
    
    margin: 0;
}

<ol>
  <li>Coffee</li>
  <li>Tea</li>
</ol>
<ol start=2>
<li>Milk</li>
  </ol>
  <ol start=4>
  <li>Rice</li>
  <li>Bread</li>
    </ol>

具有重复数字的有序列表

Ordered list with repeated numbers

html

css

html-lists