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-position 为 inside。如果需要得到类似 outside 的列表，可将 ol 的 position 设为 relative ，将 li 的 position 设为 absolute，然后设置 left 为负值进行偏移。

下面是对比图：

逆序列表

最后来个Demo。

21条评论

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

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

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

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

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

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

评论已关闭。