4

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

  1. 我喜欢奶酪
  2. 饼干很好吃
  3. 奶油很好...

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

1.我喜欢奶酪

3.食物很好吃

5.我希望星星...

4

2 回答 2

8

我不认为这可以通过正常的有序列表来实现，因为唯一可用的属性似乎如下（甚至包括 HTML5）：

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

但它可以使用 CSS 计数器来实现，如下面的代码片段所示。CSS 计数器并不是什么新鲜事物，并且有很好的浏览器支持。

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

  • counter-reset使用父级的属性创建（重置）一个计数器。该counter-reset属性一般以计数器的名称和起始值作为参数。在这里，我使用 -1 作为起始值，因为每次li增量都应该是 2，起始值必须是 1（所以 -1+2 = 1）。
  • 每次li遇到 a 时将计数器的值增加 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>

于 2016-11-15T04:40:15.887 回答
1

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

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

li然后，在偶数规则之间留一个空格：

<ol>
<li>1</li>
<li></li>
<li>3</li>
<li></li>
...
</ol>
于 2016-11-15T04:46:21.013 回答