HTML 中使用奇数编号的有序列表答案

【问题标题】：Ordered list in HTML that is numbered using odd numbersHTML 中使用奇数编号的有序列表
【发布时间】：2016-11-15 04:35:00
【问题描述】：

在 HTML 中使用<ol type="1">，我可以得到一个如下所示的有序列表：

我喜欢奶酪
饼干很好
奶油不错 ...

我如何使用<ol> 来获得一个只有奇数编号的有序列表，像这样？

1.我喜欢奶酪

3.食物很好

5.我希望有一颗星星......

【问题讨论】：

标签： html css html-lists css-counter

【解决方案1】：

我不认为这可以通过正常的有序列表来实现，因为the only attributes available seem to be the following（甚至包括 HTML5）：

type（表示编号类型）
start（表示起始值）
reversed（表示列表是否倒序）

但是可以使用 CSS 计数器来实现，如下面的 sn-p。 CSS 计数器并不是什么新鲜事物，has very good browser support.

使用计数器实现这一点非常简单，只需要以下步骤：

使用父级的counter-reset 属性创建（重置）一个计数器。 counter-reset 属性一般以计数器的名称和起始值作为参数。在这里，我使用 -1 作为起始值，因为在每个 li 处，增量应该是 2，并且起始值需要是 1（所以 -1+2 = 1）。
每次遇到li 时将计数器的值增加2。这使得计数器只有奇数值。同样，counter-increment 属性通常也采用 2 个参数 - 一个是计数器名称，另一个是它应该递增的值。
使用:before 伪元素和content 属性在列表项之前显示计数器的值。

ol {
  counter-reset: odd-numbers -1;
  list-style-type: none;
}
li {
  counter-increment: odd-numbers 2;
}
li:before {
  content: counter(odd-numbers) ". ";
}

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

另一个不设置 -1 作为起始值的选项是使用 li:first-child 选择器并将计数器仅增加 1（默认值，因此无需在 counter-increment 中指定）。对于 li 的其余部分，我们可以将其增加 2。

ol {
  counter-reset: odd-numbers;
  list-style-type: none;
}
li:first-child {
  counter-increment: odd-numbers;
}
li {
  counter-increment: odd-numbers 2;
}
li:before {
  content: counter(odd-numbers) ". ";
}

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

【讨论】：

您也可以使用相邻的选择器并将计数器从 1 开始。demo。
是的@Ricky_Ruiz。非常好的主意。没想到:D

【解决方案2】：

一种解决方案是使用这个 css 规则，它隐藏偶数元素。

li:nth-child(2n) {
  visibility: hidden;
  position: absolute;
}

然后，在偶数规则之间有一个空白li：

<ol>
<li>1</li>
<li></li>
<li>3</li>
<li></li>
...
</ol>

【讨论】：