反转 ol 编号

Question

在支持 ie7+ 的同时，如何在没有 javascript 的情况下反转 ol 编号？

我找到的解决方案要么已弃用且不适用于我当前的浏览器（firefox 和 chrome），要么使用了 ie7+ 不支持的 :before 选择器或子 > 选择器。

想法？

Answer 1

这可以通过设置lis 的值来实现。如果你有一个很长的列表，你可以使用 JavaScript 来设置值。我不认为有反转列表顺序的 CSS 解决方案。

<ol>
    <li value="3">first</li>
    <li value="2">second</li>
    <li value="1">third</li>
</ol>

Answer 2

您可以为ol 元素设置reversed 属性以实现您的目标。

<ol reversed=true> </ol>

我确信它现在可以在 Chrome、Safari 和 Firefox 上运行。 IE....不确定。

Answer 3

使用 Javascript 和 jQuery：

$(function() {

    var list = $("#list").find("li");

    // count the total number of <li>'s
    var count = $(list).length;

    // loop through each <li> and set value to a decreasing value of count
    list.each(function() {

        $(this).attr("value", count--);

    });

});

相关 HTML：

<ol id="list">
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ol>