CSS逆序列表

默认的有序列表是从1开始递增计数的,如果想使用CSS将其逆序,那么可以使用以下方法。

<!-- HTML 代码 -->
<ol><strong>逆序</strong>
    <li>line 1</li>
    <li>line 2</li>
    <li>line 3</li>
    <li>line 4</li>
    <li>line 5</li>
</ol>

/* CSS 代码 */
ol{
    list-style:none;
    counter-reset:line 6;
    /*由于对同一元素重置和使用是先递增的,所以需要设为6才能保证第一个为5*/
}
li:before{
    counter-increment:line -1;
    content:counter(line) ". ";
}

需要注意的是使用这种方法得到的布局相当于 list-style-positioninside。如果需要得到类似 outside 的列表,可将 ol 的 position 设为 relative ,将 li 的 position 设为 absolute,然后设置 left 为负值进行偏移。

下面是对比图:

逆序列表

最后来个Demo

CSS逆序列表》上有21条评论

    1. 流年 文章作者

      @Ray Chow, 嗯,若想保证最后一个是1,这样只能针对已知数量的列表

    1. 流年 文章作者

      @飞晏, 我也是最近才接触到这个

    1. 流年 文章作者

      @扯远了, 是增是减,还有梯度的大小由 counter-increment 控制

        1. 流年 文章作者

          @扯远了, 有所长有所短才是真正的人 :mrgreen:

  1. Mucid

    你不知道最大的数怎马办。。这个还是用动态语言实现比较好。。

    1. 流年 文章作者

      @Mucid, 嗯,在特定的场景下有些用处

    1. 流年 文章作者

      @QiQiBoY, CSS规范有很多都没接触过

    1. 流年 文章作者

      @vastar, 有序列表的话,全用圈不是很好吧

评论已关闭。