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

概述使用< ol type =“1”>在 HTML中,我可以得到一个有序列表,如下所示： >我喜欢奶酪 >饼干很好 >奶油很好 … 我如何使用< ol>得到一个有序列表只有奇数编号,像这样？ 我喜欢奶酪 食物很好吃 我希望有一个明星…… 我认为这不能用正常的有序列表实现,因为 the only attributes available seem to be the following(甚至包括HTML 使用< ol type =“1”>在 HTML中,我可以得到一个有序列表,如下所示：

>我喜欢奶酪
>饼干很好
>奶油很好
…

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

我喜欢奶酪

食物很好吃

我希望有一个明星……

解决方法 我认为这不能用正常的有序列表实现,因为 the only attributes available seem to be the following(甚至包括HTML5)：

> type(表示编号类型)
> start(表示起始值)
> reverse(表示列表是否颠倒)

但它可以使用CSS计数器实现,如下面的代码段所示. CSS计数器不是新事物和has very good browser support.

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

>使用父级的counter-reset属性创建(重置)计数器. counter-reset属性通常将计数器的名称和起始值作为参数.在这里,我使用了-1作为起始值,因为在每个li中,增量应该是2,并且起始值必须是1(所以-1 2 = 1).
>每次遇到li时,将计数器的值增加2.这使得计数器仅具有奇数编号的值.同样,counter-increment属性通常也有2个参数 – 一个是计数器名称,另一个是应该递增的值.
>使用：before伪元素和内容属性在列表项之前显示计数器的值.

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(默认值,因此不需要在计数器增量中指定).对于剩余的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>

总结

以上是内存溢出为你收集整理的HTML中的有序列表,使用奇数编号全部内容，希望文章能够帮你解决HTML中的有序列表,使用奇数编号所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。