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

Question

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

1. 我喜欢奶酪
2. 曲奇饼干很不错
3. 奶油很好吃...

如果想要使用<ol>标签只显示奇数编号的有序列表，该怎么做呢？

1.我喜欢奶酪

3.食物不错

5.我许愿在星星上...

- QCD_IS_GOOD

Answer 1

我认为使用普通的有序列表无法实现这一点，因为即使包括HTML5，唯一可用的属性似乎只有以下几个：

• type（指示编号类型）
• start（指示起始值）
• reversed（指示列表是否按相反顺序排列）

但是可以使用CSS计数器来实现，就像下面的代码片段一样。 CSS计数器不是什么新鲜事物，具有非常好的浏览器支持。

---

使用计数器实现这个功能非常简单，只需要执行以下步骤：

• 在父元素上使用counter-reset属性创建（重置）计数器。 counter-reset属性通常以计数器名称和起始值作为参数。 在这里，我将-1用作起始值，因为每次遇到li时增量应为2，并且起始值必须为1（因此-1 + 2 = 1）。
• 每次遇到li时将计数器的值增加2。 这使计数器仅具有奇数值。 再次，counter-increment属性通常也需要两个参数-一个是计数器名称，另一个是应增加的值。
• 使用: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>

- Harry

---

你也可以使用相邻选择器，并将计数器从1开始。演示。 - Ricky Ruiz

是的 @Ricky_Ruiz。非常好的想法。我没有想到 :D - Harry

Answer 2

一种解决方法是使用这个CSS规则，它可以隐藏偶数元素。

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

然后，在偶数行之间留一个空白的 li：

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

- Gavin Haynes