Question

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

我喜欢奶酪
Cookie很不错
奶油很好 ...

如何使用<ol>获取有序列表，只有奇数编号，如下所示？

1.我喜欢奶酪

3.食物很好

5.我希望有一位明星......

Answer 1

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

type（表示编号类型）
start（表示起始值）
反转（表示列表是否颠倒顺序）

但是可以使用CSS计数器实现，如下面的代码段所示。 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>

Answer 2

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

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

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

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

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

2 个答案: